/* ============================================================================
   STRATYLIX — BRAND FOUNDATION TOKENS
   ----------------------------------------------------------------------------
   Foundational tokens only. This is deliberately NOT the full site design
   system: no components, no typography scale for body copy, no layout rules.
   Those arrive in a later build once the header/brand system is approved.

   Palette rationale (derived from the legacy identity, simplified):
     legacy #00f5ff  neon cyan   -> kept as the brand hue but stepped back to
                                    #35D6EE for UI so it reads premium, not neon.
                                    #00F5FF survives only as --brand-glow.
     legacy #7c3aed  violet      -> softened to #7B6CF6 as a secondary accent.
     legacy #06ffa5  neon mint   -> dropped. Redundant against cyan and the
                                    single loudest colour in the old palette.
                                    A calm #34D399 remains for success states.
     legacy #ff6b35  orange      -> replaced by #D9A05B, a muted gold used
                                    sparingly for emphasis/metrics.
     legacy #020510  near-black  -> warmed to #070A12 (a trace of blue) so
                                    surfaces can step up without going grey.
     legacy #e8f4ff  ice white   -> #E9F1F8, marginally less blue.
   ========================================================================== */

:root {
  /* Declare the surface to the browser. Without this, Chrome on Android treats
     the page as light-by-default and applies Auto Dark Theme, algorithmically
     re-colouring backgrounds, text AND the inline logo SVG — the brand mark
     visibly changes when the phone switches to dark mode. Declaring the scheme
     opts the page out of that force-darkening and also gives form controls,
     scrollbars and the address bar the correct native colouring. */
  color-scheme: dark;

  /* ---- surfaces ---------------------------------------------------------- */
  --bg:                 #070A12;   /* page base                                */
  --surface:            #0C1220;   /* cards, header when solid                 */
  --surface-2:          #131B2C;   /* raised surface, menus                    */
  --surface-3:          #1B2438;   /* hover on raised surface                  */
  --surface-inset:      #05080E;   /* wells, code, inputs                      */

  /* ---- text -------------------------------------------------------------- */
  --text:               #E9F1F8;   /* primary                                  */
  --text-muted:         #9FB2C7;   /* secondary — 7.9:1 on --bg (AA/AAA body)  */
  --text-subtle:        #7286A0;   /* tertiary — 4.9:1 on --bg (AA body)       */
  --text-inverse:       #0B1420;   /* on light/brand fills                     */

  /* ---- brand ------------------------------------------------------------- */
  --brand:              #35D6EE;   /* primary cyan                             */
  --brand-strong:       #7FE9F7;   /* hover / highlight                        */
  --brand-deep:         #0E9FC4;   /* gradient end, borders on light           */
  --brand-ink:          #35D6EE;   /* brand as TEXT. Equals --brand here; the  */
                                   /* light palettes darken it, because the    */
                                   /* cyan cannot reach 4.5:1 on a light ground.*/
  --brand-ink-hover:    #7FE9F7;   /* link hover. Brightens on dark …          */
  --brand-glow:         #00F5FF;   /* legacy neon — glows/auras only, never text */

  /* logo frame ("steel") — general UI use */
  --steel-1:            #9DB4C7;
  --steel-2:            #4A6377;

  /* ---- logo -------------------------------------------------------------
     INERT, except --logo-word. The lockup ships as four PNG cuts of the
     original artwork (stratylix-{mark,word}-{dark,light}.png), so the artwork
     carries its own colour and nothing below reaches it. These stops are kept
     as the written record of the intended palette — the numbers a re-export
     from the brand master should hit. Editing them changes nothing on screen;
     to change the logo's colour, re-export the PNGs. See the note on
     --logo-adjust in header.css.

     The mark is designed TWICE, once per surface, rather than recoloured by
     the general --brand/--steel tokens. Those are tuned for UI contrast, and
     borrowing them made the logo drift: the S went bright cyan -> muted teal
     and the hexagon frame inverted light <-> dark.

     Both palettes are deliberate, and every stop clears 3:1 against its own
     page background on its own, so the mark holds wherever the gradient lands.
     Dark values are the master artwork; light values are a darker, denser cut
     of the same hues so the mark reads as printed ink on paper rather than as
     a washed-out version of the dark logo.
     ---------------------------------------------------------------------- */
  --logo-s-1:           #7FE9F7;   /* S gradient — highlight     14.04:1     */
  --logo-s-2:           #35D6EE;   /* S gradient — mid           11.31:1     */
  --logo-s-3:           #0E9FC4;   /* S gradient — shadow         6.38:1     */
  --logo-frame-1:       #9DB4C7;   /* hexagon — lit edge          9.22:1     */
  --logo-frame-2:       #4A6377;   /* hexagon — shaded edge       3.15:1     */
  --logo-word:          #E9F1F8;   /* STRATYLIX letterforms      17.34:1     */
  --logo-accent:        #35D6EE;   /* the A crossbar             11.31:1     */

  --accent:             #7B6CF6;   /* secondary accent (indigo)                */
  --accent-soft:        #A99CFF;
  --gold:               #D9A05B;   /* premium supporting accent, used sparingly */
  --success:            #34D399;
  --danger:             #F87171;

  /* ---- gradients --------------------------------------------------------- */
  --grad-brand:   linear-gradient(135deg, var(--brand-strong), var(--brand) 50%, var(--brand-deep));
  --grad-steel:   linear-gradient(160deg, #9DB4C7, #4A6377);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));

  /* ---- borders ----------------------------------------------------------- */
  --border:             rgba(159, 178, 199, .14);
  --border-strong:      rgba(159, 178, 199, .26);
  --border-brand:       rgba(53, 214, 238, .38);
  --hairline:           rgba(159, 178, 199, .08);

  /* ---- glow / elevation -------------------------------------------------- */
  --glow-brand:         0 0 24px rgba(0, 245, 255, .22);
  --glow-brand-soft:    0 0 12px rgba(0, 245, 255, .12);
  --elev-1:             0 1px 2px rgba(0,0,0,.30);
  --elev-2:             0 4px 14px rgba(0,0,0,.34);
  --elev-3:             0 12px 32px rgba(0,0,0,.42);
  --elev-4:             0 24px 60px rgba(0,0,0,.50);

  /* ---- layout ------------------------------------------------------------ */
  --container:          1240px;    /* default content container                */
  --container-narrow:   880px;     /* prose                                    */
  --container-wide:     1440px;    /* full-bleed sections                      */
  --gutter:             clamp(1.25rem, 4vw, 2.5rem);

  --header-h:           76px;      /* resting header height                    */
  --header-h-scrolled:  60px;      /* condensed after scroll                   */
  --header-h-mobile:    64px;

  /* ---- spacing (4px base) ------------------------------------------------ */
  --sp-0:  0;
  --sp-1:  .25rem;   /*  4 */
  --sp-2:  .5rem;    /*  8 */
  --sp-3:  .75rem;   /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */
  --sp-10: 8rem;     /* 128 */

  /* ---- radius ------------------------------------------------------------ */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---- motion ------------------------------------------------------------ */
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:      120ms;
  --dur:           200ms;
  --dur-slow:      320ms;
  --dur-slower:    520ms;

  /* ---- z-index ----------------------------------------------------------- */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    900;
  --z-dropdown:  950;
  --z-overlay:   1000;   /* mobile drawer scrim                                */
  --z-drawer:    1010;   /* drawer sits above its own scrim                    */
  --z-toast:     1100;

  /* ---- focus ------------------------------------------------------------- */
  --focus-ring:        0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  --focus-ring-inset:  inset 0 0 0 2px var(--brand);
}

/* ---------------------------------------------------------------------------
   Light surface context. Applied by attribute so a single section can opt in
   without a global theme switch, and so the future site can support both.
   -------------------------------------------------------------------------- */
[data-surface="light"] {
  color-scheme: light;

  --bg:            #F5F8FB;
  --surface:       #FFFFFF;
  --surface-2:     #EDF2F7;
  --surface-3:     #E3EAF2;
  --surface-inset: #E8EEF4;

  --text:          #0B1420;
  --text-muted:    #46586C;            /* 7.4:1 on --bg */
  --text-subtle:   #5E7186;            /* 4.7:1 on --bg */
  /* Text on a --brand FILL — the only thing this token is used for (primary
     button, its hover, the chat send button). It must be DARK here: light text
     on the light palette's #0E93B4 is 3.37:1, a WCAG AA failure on every
     primary CTA on the site. Dark text on the same fill is 5.15:1, and 7.62:1
     on the --brand-strong hover. It also makes the button read the same in
     both themes, which the light value never did. */
  --text-inverse:  #0B1420;

  --brand:         #0E93B4;
  --brand-strong:  #22B5D6;
  --brand-deep:    #046C8C;
  --brand-ink:     #045971;
  --brand-ink-hover: #046C8C;      /* … and lightens on light, still 5.9:1 on #FFF.
                                      Going darker than --brand-ink would read as
                                      the link losing colour, not gaining focus. */

  --steel-1:       #4A6377;
  --steel-2:       #1B2C3A;

  /* Logo, light cut. Not a tint of the dark one — a denser draw of the same
     hues. Ratios are against --bg #F5F8FB. */
  --logo-s-1:      #1497BC;   /* S gradient — highlight      3.19:1 */
  --logo-s-2:      #0B7E9C;   /* S gradient — mid            4.40:1 */
  --logo-s-3:      #02536D;   /* S gradient — shadow         8.01:1 */
  --logo-frame-1:  #5E7C96;   /* hexagon — lit edge          4.11:1 */
  --logo-frame-2:  #26384A;   /* hexagon — shaded edge      11.28:1 */
  --logo-word:     #0B1420;   /* STRATYLIX letterforms      17.36:1 */
  --logo-accent:   #0B7E9C;   /* the A crossbar              4.40:1 */

  --border:        rgba(11, 20, 32, .12);
  --border-strong: rgba(11, 20, 32, .22);
  --border-brand:  rgba(14, 147, 180, .40);
  --hairline:      rgba(11, 20, 32, .07);

  --grad-steel:    linear-gradient(160deg, #4A6377, #1B2C3A);
  --grad-surface:  linear-gradient(180deg, rgba(11,20,32,.03), rgba(11,20,32,0));

  --glow-brand:      0 0 24px rgba(14, 147, 180, .18);
  --glow-brand-soft: 0 0 12px rgba(14, 147, 180, .10);
  --elev-1: 0 1px 2px rgba(11,20,32,.06);
  --elev-2: 0 4px 14px rgba(11,20,32,.08);
  --elev-3: 0 12px 32px rgba(11,20,32,.10);
  --elev-4: 0 24px 60px rgba(11,20,32,.14);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

/* ---------------------------------------------------------------------------
   Motion preference. Tokens collapse so every consumer inherits the reduction
   without needing its own media query.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}