/* AEYA design tokens v1.0, extracted from aeyapadel.com live theme CSS, 2026-08-15.
   Human spec: 01 Brand/Design System.md. Use these names in new theme code and mockups. */

:root {
  /* Colour: core */
  --aeya-navy: #081633;
  --aeya-cloud: #FFFBF4;
  --aeya-espresso: #644040;
  --aeya-sky: #E1EDF5;
  --aeya-sage: #EBF5EE;
  --aeya-stone: #D3CDC5;
  --aeya-royal: #1D3686;

  /* Colour: functional */
  --aeya-border: #E6E6E6;
  --aeya-error: #8B0000;
  --aeya-success: #006400;
  --aeya-stock-in: #3ED660;
  --aeya-stock-low: #EE9441;
  --aeya-stock-out: #C8C8C8;

  /* Surfaces */
  --aeya-bg: var(--aeya-cloud);
  --aeya-ink: var(--aeya-navy);
  --aeya-bg-inverse: var(--aeya-navy);
  --aeya-ink-inverse: var(--aeya-cloud);

  /* Typography */
  --aeya-font: "Inter", -apple-system, sans-serif;
  --aeya-weight-body: 400;
  --aeya-weight-subheading: 500;
  --aeya-weight-heading: 700;
  --aeya-tracking-heading: 0.25em;   /* uppercase display headings */
  --aeya-tracking-eyebrow: 0.13em;   /* uppercase nav and eyebrows */
  --aeya-tracking-micro: 0.06em;
  --aeya-size-3xs: 0.625rem;
  --aeya-size-2xs: 0.75rem;
  --aeya-size-xs: 0.8125rem;
  --aeya-size-sm: 0.875rem;
  --aeya-size-md: 1rem;
  --aeya-size-lg: 1.125rem;
  --aeya-size-xl: 1.25rem;
  --aeya-size-2xl: 1.5rem;
  --aeya-size-3xl: 2rem;
  --aeya-size-4xl: 2.5rem;
  --aeya-size-5xl: 3rem;
  --aeya-size-6xl: 3.5rem;
  --aeya-size-h1: clamp(3rem, 5.6vw, 3.5rem);
  --aeya-size-h2: clamp(2.25rem, 4.8vw, 3rem);
  --aeya-leading-display: 1;
  --aeya-leading-heading: 1.15;
  --aeya-leading-body: 1.6;
  --aeya-measure-body: 32.5em;
  --aeya-measure-body-narrow: 22.75em;

  /* Spacing */
  --aeya-space-3xs: 0.125rem;
  --aeya-space-2xs: 0.25rem;
  --aeya-space-xs: 0.5rem;
  --aeya-space-sm: 0.7rem;
  --aeya-space-md: 0.8rem;
  --aeya-space-lg: 1rem;
  --aeya-space-xl: 1.25rem;
  --aeya-space-2xl: 1.5rem;
  --aeya-space-3xl: 1.75rem;
  --aeya-space-4xl: 2rem;
  --aeya-space-5xl: 3rem;
  --aeya-space-6xl: 4rem;
  --aeya-section-pad-block: max(20px, 80px);
  --aeya-section-pad-inline: max(20px, 40px);

  /* Shape */
  --aeya-radius-none: 0;
  --aeya-radius-input: 4px;
  --aeya-radius-card: 4px;
  --aeya-radius-button: 14px;
  --aeya-radius-pill: 40px;
  --aeya-radius-swatch: 32px;
  --aeya-border-w: 1px;
  --aeya-border-w-emphasis: 2px;
  --aeya-border-w-rule: 5px;

  /* Components */
  --aeya-button-pad-block: 16px;
  --aeya-button-pad-inline: 24px;
  --aeya-button-shadow: 0 2px 3px rgb(0 0 0 / 20%);
  --aeya-touch-target: 36px;
  --aeya-swatch-size: 34px;
  --aeya-input-pad: 0.8rem;
  --aeya-drawer-max-w: 500px;

  /* Motion: springs, enhancement only; content visible without JS */
  --aeya-motion-fast: 0.298s;
  --aeya-motion-base: 0.382s;
  --aeya-motion-slow: 0.498s;
  --aeya-motion-rise: 10px;
}

/* Reference component recipes */

.aeya-btn-primary {
  font-family: var(--aeya-font);
  background: var(--aeya-navy);
  color: var(--aeya-cloud);
  border: none;
  border-radius: var(--aeya-radius-button);
  padding: var(--aeya-button-pad-block) var(--aeya-button-pad-inline);
  box-shadow: var(--aeya-button-shadow);
  min-height: var(--aeya-touch-target);
}

.aeya-btn-secondary {
  font-family: var(--aeya-font);
  background: transparent;
  color: var(--aeya-navy);
  border: var(--aeya-border-w) solid var(--aeya-navy);
  border-radius: var(--aeya-radius-button);
  padding: var(--aeya-button-pad-block) var(--aeya-button-pad-inline);
  min-height: var(--aeya-touch-target);
}

.aeya-heading {
  font-family: var(--aeya-font);
  font-weight: var(--aeya-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-heading);
  line-height: var(--aeya-leading-display);
  color: var(--aeya-ink);
}

.aeya-eyebrow {
  font-family: var(--aeya-font);
  font-size: var(--aeya-size-2xs);
  font-weight: var(--aeya-weight-subheading);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow);
}

/* On-navy inversion */
.aeya-surface-inverse {
  background: var(--aeya-bg-inverse);
  color: var(--aeya-ink-inverse);
}
.aeya-surface-inverse .aeya-btn-primary { background: var(--aeya-cloud); color: var(--aeya-navy); }
.aeya-surface-inverse .aeya-btn-secondary { color: var(--aeya-cloud); border-color: var(--aeya-cloud); }