/* Aeon design tokens - extracted verbatim from the iOS app.
   Sources: Assets.xcassets/*.colorset, Core/DesignSystem/{Palette,Elevation,Motion}.swift,
            AeonSharedUI/{Typography,Space,Radius}.swift                                   */

:root {
  /* Purple ramp (brand primitives) */
  --ae-purple-50:  #EDEDFD;
  --ae-purple-100: #D3D2F8;
  --ae-purple-200: #A9A8F0;
  --ae-purple-400: #6E6CE5;   /* brand indigo */
  --ae-purple-600: #4A47A8;
  --ae-purple-700: #302E75;
  --ae-purple-800: #1C1B4A;
  --ae-purple-900: #0D0C22;

  /* Blue ramp (Scenes) */
  --ae-blue-50:  #E7F2FE;
  --ae-blue-100: #C2DEFB;
  --ae-blue-200: #93C7F7;
  --ae-blue-400: #5CA8F2;
  --ae-blue-600: #2E77BE;
  --ae-blue-700: #1F578E;
  --ae-blue-800: #143A61;
  --ae-blue-900: #0A1F38;

  /* Sky gradients (top -> bottom), from SkyPhaseGradients.skyStops */
  --ae-sky-golden: linear-gradient(180deg,#6E63C4,#9A6FB0,#D98E7E,#F0A866,#F6C27E);
  --ae-sky-dusk:   linear-gradient(180deg,#6E63C4,#9A6FB0,#C98B8F,#EEB877);
  --ae-sky-day:    linear-gradient(180deg,#7CB4EE,#8FBFF0,#A5CCF3,#BCD9F6,#D3E6F8);
  --ae-sky-night:  linear-gradient(180deg,#0E0E2A,#14143A,#1E1C48,#272258);

  /* Spacing - Space.swift */
  --ae-space-xxs: 2px;  --ae-space-xs: 4px;  --ae-space-sm: 8px;
  --ae-space-md: 12px;  --ae-space-lg: 16px; --ae-space-xl: 24px;
  --ae-space-xxl: 32px;

  /* Radii - Radius.swift */
  --ae-radius-xs: 4px;      --ae-radius-sm: 8px;      --ae-radius-chip: 12px;
  --ae-radius-card: 16px;   --ae-radius-control: 18px; --ae-radius-surface: 20px;
  --ae-radius-hero: 24px;

  /* Elevation - Elevation.swift */
  --ae-shadow-hairline: 0 1px 1.5px rgba(0,0,0,.05);
  --ae-shadow-card:     0 3px 12px rgba(0,0,0,.08);
  --ae-shadow-hero:     0 10px 24px rgba(0,0,0,.22);

  /* Motion - Motion.swift. Springs approximated as cubic-beziers. */
  --ae-snap:   .2s cubic-bezier(.4,0,.2,1);
  --ae-reveal: .45s cubic-bezier(.2,.8,.2,1);
  --ae-select: .18s ease-in-out;
  --ae-smooth: .4s cubic-bezier(.32,.72,0,1);
  --ae-align:  1.1s cubic-bezier(.32,.72,0,1);   /* the eye-alignment settle */
  --ae-press:  .22s cubic-bezier(.3,.7,.2,1.3);

  /* Type - Typography.swift. New York is a system font on Apple platforms,
     so ui-serif resolves to the real display face with zero webfonts. */
  --ae-serif: ui-serif, "New York", Iowan Old Style, Palatino, Georgia, serif;
  --ae-sans:  system-ui, -apple-system, "SF Pro Text", Inter, Helvetica, Arial, sans-serif;

  /* Eye-alignment targets - FramingSettings.default. Used by the demo. */
  --ae-eye-left:  39.8%;
  --ae-eye-right: 60.2%;
  --ae-eye-y:     41.67%;

  --ae-noise: url("./noise.png");
  --ae-noise-opacity: .04;
}

/* Light only. Values are the app's light-appearance tokens. */
:root {
  --ae-bg:        #F4F3F8;
  --ae-card:      #FFFFFF;
  --ae-accent:    #6E6CE5;
  /* The CTA fill is a shade deeper than --ae-accent on purpose. White on the
     brand indigo #6E6CE5 is 4.25:1, and every button using it is 14-17px at
     weight 600 - normal-size text, so the bar is 4.5:1, not the 3:1 for large
     text. #6765D9 (20% toward --ae-purple-600) reads as the same indigo and
     gives 4.73:1. Same reasoning as the Scenes tab fix in index.html.
     --ae-accent itself is unchanged: it is the app's AccentColor identity. */
  --ae-cta:       #6765D9;
  --ae-scenes:    #5093D4;
  /* Nudged from #6B69AB, which was 4.49:1 on --ae-bg - a hair under AA for
     the 12px uppercase eyebrow it colours. #615FA0 is 5.21:1. */
  --ae-band:      #615FA0;
  --ae-text:      #131118;
  --ae-text-dim:  rgba(19,17,24,.62);
  --ae-hairline:  rgba(0,0,0,.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ae-snap: 0s; --ae-reveal: 0s; --ae-select: 0s;
    --ae-smooth: 0s; --ae-align: 0s; --ae-press: 0s;
  }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ---------- shared primitives ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ae-bg);
  color: var(--ae-text);
  font-family: var(--ae-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ae-select), color var(--ae-select);
}

h1, h2, h3 { font-family: var(--ae-serif); font-weight: 400; letter-spacing: -.02em; margin: 0; }

a { color: inherit; }

.ae-eyebrow {
  font-family: var(--ae-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;      /* Tracking.caption = 0.8pt */
  text-transform: uppercase;
  color: var(--ae-band);
}

.ae-btn {
  display: inline-flex; align-items: center; gap: var(--ae-space-sm);
  padding: 14px var(--ae-space-xl);
  border: 0; border-radius: var(--ae-radius-control);
  background: var(--ae-cta); color: #fff;
  font-family: var(--ae-sans); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--ae-press), filter var(--ae-select);
}
.ae-btn:hover  { filter: brightness(1.08); }
.ae-btn:active { transform: scale(.97); }
.ae-btn--ghost {
  background: transparent; color: var(--ae-text);
  box-shadow: inset 0 0 0 1px var(--ae-hairline);
}

.ae-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--ae-space-md);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ae-accent) 12%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--ae-hairline);
  font-size: 13px; font-weight: 500;
}


:focus-visible { outline: 2px solid var(--ae-accent); outline-offset: 3px; border-radius: 4px; }

.ae-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--ae-space-xl); }