/* =========================================================================
   Analog Endurance — Brand Tokens
   Single source of truth for the brand's visual language.
   Namespace: --ae-*   ·   Consumed by docs/brand.html

   TWO LAYERS, and the tokens are split to match what actually ships:

     --ae-ui-*   the app chrome / web layer (public/index.html and the
                 plan-builder shell). COOL: slate neutrals, white surfaces,
                 an action blue, cool-tinted shadows.
     everything  the warm artifact layer (the printable .sheet) plus the
     else        watercolor + alpenglow motifs that both layers share. WARM:
                 #FCF8F1 paper, terracotta, #2E2A24 ink.

   The warm set was written first, as the intended destination for the chrome
   too. That migration has NOT happened — see docs/brand.html §01. The
   --ae-ui-* block below documents the cool chrome as it really is, so the
   token file describes the product rather than only the plan for it.
   ========================================================================= */

:root {
  /* --- Color · warm core (artifact / brand motifs) ---------------------- */
  --ae-terracotta: #C0573B;   /* PRIMARY brand accent (plan sheet --accent) */
  --ae-terracotta-deep: #A6462E; /* pressed/hover for terracotta */
  --ae-clay:       #C99369;   /* clay theme tint */
  --ae-apricot:    #EBA763;   /* sunrise theme tint */
  --ae-rose:       #CF8B83;   /* dusty rose (alpenglow) */
  --ae-gold:       #F8D29C;   /* sunrise gold (alpenglow) */

  /* --- Color · paper & warm neutrals ------------------------------------ */
  --ae-paper:      #FCF8F1;   /* warm paper — default surface */
  --ae-paper-warm: #FBF4EA;   /* one step deeper */
  --ae-paper-deep: #F7EFE4;   /* deepest warm surface */
  --ae-ink:        #2E2A24;   /* warm near-black text (replaces cool #0b1120) */
  --ae-soft:       #6F665A;   /* muted / secondary text */
  --ae-hair:       #E4DACB;   /* hairline / borders */
  /* Calendar date numbers on the printable sheet. TRANSLUCENT on purpose, and */
  /* not interchangeable with --ae-soft: the numbers sit on month-band fills    */
  /* that run from near-white to fully saturated, so a fixed grey is either     */
  /* right at the pale end or invisible at the dark one. This always lands the  */
  /* same step darker than whatever is behind it.                              */
  --ae-date-ink:   rgba(46, 42, 36, .55);  /* = --ae-ink at 55% */

  /* --- Color · harmonized cool accent (alpenglow night / Boston) -------- */
  /* In real use in the plan-builder chrome: side-tile icons, the upload      */
  /* dropzone's active state, and focus rings (rgba(61,90,150,.25)).          */
  --ae-blue:       #3D5A96;   /* secondary chrome accent, focus rings */
  --ae-indigo:     #1D3A68;   /* deep night — hover/pressed for blue */
  --ae-slate:      #4C6088;   /* mid slate — subtle cool UI */

  /* =======================================================================
     Color · APP CHROME (the cool layer that actually ships)
     Lifted verbatim from public/index.html + public/plan-builder/index.html.
     This is the palette a visitor sees on both public pages today: the warm
     core above is confined to the printable sheet and the watercolor art.
     ======================================================================= */
  --ae-ui-blue:        #007AFF;  /* PRIMARY action: every filled button, progress bar, switch-on, range thumb */
  --ae-ui-blue-deep:   #2563EB;  /* tailwind brand-600 — link text, arrow links */
  --ae-ui-ink:         #0B1120;  /* cool near-black body text (tailwind `ink`) */
  --ae-ui-soft:        #5B6472;  /* secondary text (tailwind `slatey`) */
  --ae-ui-muted:       #64748B;  /* segmented-control rest state */
  --ae-ui-faint:       #94A3B8;  /* chevrons, disabled glyphs */
  --ae-ui-slate-deep:  #334155;  /* zoom box text, segmode hover */
  --ae-ui-slate-ink:   #0F172A;  /* zoom box / segmode active text */

  --ae-ui-tile:        #FFFFFF;  /* cards, sidebar tiles, onboarding backdrop */
  --ae-ui-panel:       #F8FAFC;  /* the settings sidebar, upload dropzone */
  --ae-ui-canvas:      #DCE0E6;  /* the flat grey canvas the plan sits on */
  --ae-ui-canvas-lt:   #F7F7F7;  /* landing page's alternating section band */
  --ae-ui-wash:        #EEF3FF;  /* pale blue wash behind tile icons / drag state */
  --ae-ui-wash-grey:   #EEF2F7;  /* zoom-box hover */
  --ae-ui-track:       #F1F5F9;  /* segmented-control track */

  --ae-ui-hair:        #E2E8F0;  /* sidebar edge, field borders (slate-200) */
  --ae-ui-hair-soft:   #E6EBF1;  /* side-tile border */
  --ae-ui-hair-strong: #CBD5E1;  /* field hover border, dropzone dash, switch-off */

  /* Cool-tinted shadows — every chrome shadow is rgba(15,23,42,…), NOT the
     warm --ae-shadow-* set below. Both exist because both are in the product. */
  --ae-ui-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --ae-ui-shadow-md: 0 4px 18px rgba(15,23,42,.16);
  --ae-ui-shadow-lg: 0 12px 44px rgba(15,23,42,.20);
  --ae-ui-focus:     0 0 0 3px rgba(61,90,150,.25);   /* side-tile head focus */
  --ae-ui-focus-ios: 0 0 0 3px rgba(0,122,255,.25);   /* range / switch focus */

  /* --- Alpenglow gradient (signature hero device) ---------------------- */
  /* Copied verbatim from plan.html/index.html .sky so it stays identical.  */
  --ae-glow-1: #0d1830;  /* deep indigo (night)  */
  --ae-glow-2: #1d3a68;
  --ae-glow-3: #4c6088;
  --ae-glow-4: #8d7f9c;  /* dusky lavender       */
  --ae-glow-5: #cf8b83;  /* dusty rose           */
  --ae-glow-6: #eda87c;  /* warm apricot         */
  --ae-glow-7: #f8d29c;  /* sunrise gold         */
  --ae-sky:
    radial-gradient(140% 75% at 50% 100%, rgba(255,189,130,.5) 0%, rgba(255,189,130,0) 55%),
    linear-gradient(180deg,#0d1830 0%,#1d3a68 20%,#4c6088 40%,#8d7f9c 58%,#cf8b83 74%,#eda87c 88%,#f8d29c 100%);

  /* Warm textured-paper backdrop (from plan.html #app.art-bg) ----------- */
  --ae-paper-bg:
    radial-gradient(120% 55% at 50% -10%, rgba(192,87,59,.05), rgba(192,87,59,0) 60%),
    linear-gradient(180deg,#FCF8F1 0%,#FBF4EA 55%,#F7EFE4 100%);

  /* --- Seasonal theme ramps (from plan.html THEMES — light -> deep) ----- */
  /* Displayed as the brand's seasonal palette; unchanged from the app.     */
  --ae-clay-1: #F4E7DD; --ae-clay-2: #EAD2C0; --ae-clay-3: #E0BDA3;
  --ae-clay-4: #D5A886; --ae-clay-5: #C99369; --ae-clay-6: #BD7E4D;

  --ae-sunrise-1: #FBEBDD; --ae-sunrise-2: #F8DABE; --ae-sunrise-3: #F4C99F;
  --ae-sunrise-4: #F0B881; --ae-sunrise-5: #EBA763; --ae-sunrise-6: #E69646;

  --ae-sage-1: #E9EEE3; --ae-sage-2: #D6E0CB; --ae-sage-3: #C2D2B2;
  --ae-sage-4: #AFC49A; --ae-sage-5: #9BB681; --ae-sage-6: #88A869;

  --ae-dusk-1: #EFE6EC; --ae-dusk-2: #E0CDD9; --ae-dusk-3: #D1B4C6;
  --ae-dusk-4: #C29BB3; --ae-dusk-5: #B382A0; --ae-dusk-6: #A4698D;

  --ae-sea-1: #E2EEEC; --ae-sea-2: #C8E0DC; --ae-sea-3: #AED2CC;
  --ae-sea-4: #94C4BC; --ae-sea-5: #7AB6AC; --ae-sea-6: #60A89C;

  --ae-peri-1: #E9EAF8; --ae-peri-2: #D3D6F1; --ae-peri-3: #BDC2EA;
  --ae-peri-4: #A7AEE3; --ae-peri-5: #9099D9; --ae-peri-6: #7A85D0;

  /* Race ramps (RACE_THEMES — shown only for their Major, and LOCKED in when
     that race's backdrop is chosen). Four majors have one; London, Berlin and
     Sydney still fall back to the standard six. */
  --ae-boston-1: #E9EDF5; --ae-boston-2: #C7D2E8; --ae-boston-3: #A5B7DB;
  --ae-boston-4: #6E85B8; --ae-boston-5: #3D5A96; --ae-boston-6: #1B3A6B;

  --ae-chicago-1: #E6EEF7; --ae-chicago-2: #BFD4EC; --ae-chicago-3: #8FB3DE;
  --ae-chicago-4: #4A7FC0; --ae-chicago-5: #B33A4A; --ae-chicago-6: #8B1E2E;

  --ae-tokyo-1: #FBEEF1; --ae-tokyo-2: #F4D3DB; --ae-tokyo-3: #EBACBB;
  --ae-tokyo-4: #DC7E90; --ae-tokyo-5: #CB4560; --ae-tokyo-6: #A32040;

  --ae-nyc-1: #EAF1F8; --ae-nyc-2: #C6D7E9; --ae-nyc-3: #96B4D3;
  --ae-nyc-4: #4C7FB2; --ae-nyc-5: #DB6E2B; --ae-nyc-6: #AE4B12;

  /* Art ramps (ART_THEMES — sampled from each generic watercolor frame's own
     pigment). OFFERED, not enforced: picking the backdrop preselects the
     palette but leaves the color control enabled. */
  --ae-poppy-1: #FDEFE6; --ae-poppy-2: #F8D8C2; --ae-poppy-3: #F2B892;
  --ae-poppy-4: #E9925C; --ae-poppy-5: #D9642C; --ae-poppy-6: #B8410F;

  --ae-winterblue-1: #EEF2F6; --ae-winterblue-2: #D6E0EA; --ae-winterblue-3: #B4C6D9;
  --ae-winterblue-4: #8CA6C2; --ae-winterblue-5: #5F81A6; --ae-winterblue-6: #33587F;

  --ae-autumn-1: #FDF2E3; --ae-autumn-2: #F8DFBB; --ae-autumn-3: #F1C489;
  --ae-autumn-4: #E7A254; --ae-autumn-5: #D17A2B; --ae-autumn-6: #A9520F;

  /* --- Typography ------------------------------------------------------- */
  /* Two deliberate families. The printable artifact stays intentionally    */
  /* separate (per CLAUDE.md) — don't restyle the sheet to match web chrome. */
  --ae-font-display:        'Fraunces', Georgia, serif;        /* web headings */
  --ae-font-sans:           'Inter', system-ui, sans-serif;    /* web body + UI */
  /* The sheet's title is DM Serif Display 400 — a static font with no weight  */
  /* or optical-size axis, so don't ask it for 600 (the browser fakes it and   */
  /* smears the hairlines). NOT Merriweather, which this token used to name    */
  /* and which no page has ever loaded, and no longer Fraunces, which is now   */
  /* the web chrome's face only.                                               */
  --ae-font-artifact-serif: 'DM Serif Display', Georgia, serif; /* plan title only */
  --ae-font-artifact-sans:  'Work Sans', -apple-system, sans-serif; /* plan body */

  /* Type scale */
  --ae-text-display-lg: 3.75rem;  /* 60px hero  */
  --ae-text-display:    3rem;     /* 48px       */
  --ae-text-h1:         2.25rem;  /* 36px       */
  --ae-text-h2:         1.875rem; /* 30px       */
  --ae-text-h3:         1.5rem;   /* 24px       */
  --ae-text-h4:         1.25rem;  /* 20px       */
  --ae-text-body-lg:    1.0625rem;/* 17px       */
  --ae-text-body:       0.9375rem;/* 15px       */
  --ae-text-kicker:     0.75rem;  /* 12px, uppercase tracking-widest */

  /* Weights */
  --ae-weight-regular: 400;
  --ae-weight-medium:  500;
  --ae-weight-semibold:600;
  --ae-weight-bold:    700;
  --ae-weight-black:   900;  /* Fraunces heaviest display cut */

  /* Line-height & tracking */
  --ae-leading-tight: 1.1;
  --ae-leading-snug:  1.25;
  --ae-leading-body:  1.6;
  --ae-tracking-tight: -0.02em;
  --ae-tracking-wide:  0.13em;   /* kickers / column heads */
  --ae-tracking-wider: 0.18em;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --ae-space-1: 0.25rem;  /* 4  */
  --ae-space-2: 0.5rem;   /* 8  */
  --ae-space-3: 0.75rem;  /* 12 */
  --ae-space-4: 1rem;     /* 16 */
  --ae-space-5: 1.5rem;   /* 24 */
  --ae-space-6: 2rem;     /* 32 */
  --ae-space-7: 3rem;     /* 48 */
  --ae-space-8: 5rem;     /* 80 — section rhythm */

  /* --- Radius ----------------------------------------------------------- */
  --ae-radius-sm:   6px;    /* day cells, small chips */
  --ae-radius-ctl:  8px;    /* tile icon chips, segmented-control buttons */
  --ae-radius-fld:  11px;   /* sidebar fields, file rows, segmode track */
  --ae-radius-md:   14px;   /* cards, sidebar tiles, sheet */
  --ae-radius-lg:   1rem;   /* large panels, dropzone, onboarding preview */
  --ae-radius-pill: 999px;  /* buttons, badges */

  /* --- Shadows (warm-tinted off --ae-ink, not pure black) -------------- */
  --ae-shadow-sm: 0 1px 2px rgba(46,42,36,.06);
  --ae-shadow-md: 0 6px 30px rgba(46,42,36,.10);
  --ae-shadow-lg: 0 12px 40px rgba(46,42,36,.16);

  /* --- Motion ----------------------------------------------------------- */
  --ae-ease:      cubic-bezier(.2,.7,.2,1);
  --ae-duration:  200ms;
  --ae-lift:      -2px;      /* hover translateY */
  --ae-press:     0.97;      /* active scale */
}

/* =========================================================================
   Watercolor motif — reusable primitives
   Generalizes plan.html's .art-top/.art-bottom/.tinted technique so any
   surface (hero, dividers, cards) can carry the hand-made, analog texture.
   Usage:
     <div class="ae-wash">            multiply wash of a PNG onto warm paper
       <img src="art/winter-frame.png" alt="">
     </div>
     add .ae-wash--tinted + set --ae-tint for a duotone in a theme color.
   ========================================================================= */

/* Warm textured-paper surface */
.ae-surface-paper { background: var(--ae-paper-bg); }

/* Alpenglow surface (hero / CTA bands) */
.ae-surface-sky { background: var(--ae-sky); }

/* Watercolor wash: drops the PNG's baked-in white via multiply so only the
   pigment blends onto the paper beneath. */
.ae-wash { position: relative; }
.ae-wash > img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;   /* white -> transparent over paper */
}

/* Duotone: grayscale the art, then paint the active theme tint through it.
   Set --ae-tint to any ramp color (e.g. var(--ae-clay-5)). */
.ae-wash--tinted > img { filter: grayscale(1); }
.ae-wash--tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ae-tint, var(--ae-clay-5));
  mix-blend-mode: color;
  pointer-events: none;
}

/* Reduced-motion: neutralize brand transitions/animations globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}