/* ═══════════════ BRASH Platform — tokens ═══════════════
   The canonical token set for every BRASH surface. The door (index.html), the
   Access screen and the switcher read this file directly; the three apps COPY
   the blocks they need into their own stylesheets (BRASH OS/OS Site/assets/
   styles.css, BRASH Atlas/Atlas Site/styles.css, …) — the platform README's
   rule that no app depends on a file inside another folder still holds, so
   this is the source they copy from, never a file they link.

   Two appearances, both first-class. Light is :root; dark is stamped as
   <html data-theme="dark">, or follows the system when nothing is stamped.
   Each surface decides its own resting appearance and stamps it pre-paint from
   a one-line script in its <head>: the door and Access are dark unless
   `platform.appearance` says light; the OS is light unless `os.appearance`
   says dark; Atlas is dark unless `atlas.appearance` says light.

   Contrast is printed beside every text token, measured against the surface
   it is used on, with the value the door carried before 3 Sep 2026 beside it.
   Every text token clears 4.5:1 in both appearances.
   Brief: docs/PLATFORM-DOOR-UX-DESIGN-BRIEF.md §3. */

/* ═══ Light ═══ */
:root{
  color-scheme:light;
  --canvas:#F3F2EF;                 /* the page                                   (door: #050505) */
  --surface:#FFFFFF;                /* a resting slab, a card                     (door: #080808) */
  --surface-raised:#FFFFFF;         /* a menu, a sheet                            (door: #101010) */
  --material:rgba(236,234,229,.72); /* a translucent bar                                          */
  --line:rgba(0,0,0,.08);           /* a divider                                  (door: rgba(255,255,255,.12)) */
  --line-strong:rgba(0,0,0,.14);    /* a locked slab's dashed edge                                */
  --ink:#111111;                    /* headings — 17.4:1 on canvas, 18.9:1 on surface   (door: #fff) */
  --ink-2:#4A4A48;                  /* body — 7.9:1 on canvas, 8.6:1 on surface         (door: #cfcfcf, and #fff at .6) */
  --ink-3:#66655F;                  /* secondary — 5.4:1 on canvas, 5.9:1 on surface    (door: #8d8d8d, #6f6f6f, and #fff at .3 = 2.56:1) */
  --on-ink:#FFFFFF;                 /* text on a Filled (ink) button — 18.9:1                     */
  --f3:rgba(17,17,17,.03); --f6:rgba(17,17,17,.06); --f8:rgba(17,17,17,.08); --f12:rgba(17,17,17,.12); --f16:rgba(17,17,17,.16); --f24:rgba(17,17,17,.24);
  --red:#F40000;                    /* FILL ONLY: the curtain, the wordmark, the hovered slab, the B/ glyph */
  /* The wordmark in every app's top-left corner (5 Oct 2026): red on paper
     and on graphite, BLACK on a white surface. Each app paints its logo with
     `filter:var(--logo-filter)` and sets this to brightness(0) wherever the
     header sits on --surface white (the Resource Hub's light masthead);
     everywhere else it stays none and the red wordmark shows as drawn. */
  --logo-filter:none;
  --red-text:#D40000;               /* the error line — 5.9:1 on canvas, 6.4:1 on surface   (door: #F40000 at 9.5–13px = 4.62:1 on ink) */
  --red-soft:rgba(244,0,0,.10);
  --on-red:#0b0b0b;                 /* text on the curtain and the hovered slab — 5.0:1 on #F40000 */
  --amber:#F5A623; --amber-text:#9A5C00; --amber-soft:rgba(245,166,35,.16);
  --green:#34C26B; --green-text:#1E7F4A; --green-soft:rgba(52,194,107,.14);
  --focus:#2F6FED;                  /* the 2px focus ring                          (door: none) */
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-raised:0 8px 32px rgba(0,0,0,.14);
  --shadow-paper:0 12px 40px rgba(0,0,0,.12);
  --scrim:rgba(0,0,0,.20);

  --sans:"Neue Haas Grotesk Text Pro","Neue Haas Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Neue Haas Grotesk Display Pro","Neue Haas Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--sans);               /* no monospace on the platform's chrome any more */

  --row-h:44px;                     /* the touch floor */
  --radius:8px; --radius-lg:12px;
}

/* ═══ Dark ═══
   Written twice — once for the stamp, once for the system setting when nothing
   is stamped — because a media query and an attribute selector cannot share
   one rule. Keep the two blocks identical. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#141414;                 /* (door: #050505)                            */
  --surface:#1C1C1E;                /* (door: #080808)                            */
  --surface-raised:#26262A;         /* (door: #101010)                            */
  --material:rgba(32,32,34,.72);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --ink:#F5F5F3;                    /* 16.5:1 on canvas, 14.9:1 on surface        (door: #fff) */
  --ink-2:#C9C8C4;                  /* 10.9:1 on canvas, 9.9:1 on surface         (door: #cfcfcf; #fff at .6 on red = 2.99:1) */
  --ink-3:#9C9B96;                  /* 6.6:1 on canvas, 6.0:1 on surface          (door: #8d8d8d = 5.9:1, #6f6f6f = 3.9:1, #6a6a6a = 3.52:1) */
  --on-ink:#111111;
  --f3:rgba(245,245,243,.04); --f6:rgba(245,245,243,.07); --f8:rgba(245,245,243,.09); --f12:rgba(245,245,243,.13); --f16:rgba(245,245,243,.17); --f24:rgba(245,245,243,.25);
  --red:#F40000;
  --red-text:#FF5A4F;               /* 6.0:1 on canvas, 5.4:1 on surface          (door: #F40000 = 4.62:1) */
  --red-soft:rgba(244,0,0,.18);
  --on-red:#0b0b0b;                 /* 5.0:1 on #F40000                           */
  --amber:#F5A623; --amber-text:#F5A623; --amber-soft:rgba(245,166,35,.18);
  --green:#34C26B; --green-text:#4FC57A; --green-soft:rgba(52,194,107,.16);
  --focus:#7FB2FF;
  --shadow-1:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4);
  --shadow-raised:0 8px 32px rgba(0,0,0,.6);
  --shadow-paper:0 12px 40px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#141414; --surface:#1C1C1E; --surface-raised:#26262A;
    --material:rgba(32,32,34,.72);
    --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
    --ink:#F5F5F3; --ink-2:#C9C8C4; --ink-3:#9C9B96; --on-ink:#111111;
    --f3:rgba(245,245,243,.04); --f6:rgba(245,245,243,.07); --f8:rgba(245,245,243,.09); --f12:rgba(245,245,243,.13); --f16:rgba(245,245,243,.17); --f24:rgba(245,245,243,.25);
    --red:#F40000; --red-text:#FF5A4F; --red-soft:rgba(244,0,0,.18); --on-red:#0b0b0b;
    --amber:#F5A623; --amber-text:#F5A623; --amber-soft:rgba(245,166,35,.18);
    --green:#34C26B; --green-text:#4FC57A; --green-soft:rgba(52,194,107,.16);
    --focus:#7FB2FF;
    --shadow-1:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4);
    --shadow-raised:0 8px 32px rgba(0,0,0,.6);
    --shadow-paper:0 12px 40px rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.45);
  }
}

/* ═══ Type roles ═══
   The floor is Caption 12. Retired from the door: 8.5, 9.5, 10.5 and 12.5px,
   and every tracked-caps label. Sentence case everywhere except the wordmark. */
.t-hero{font-family:var(--display);font-size:clamp(44px,7vw,88px);line-height:.94;letter-spacing:-.05em;font-weight:700}
.t-door{font-family:var(--display);font-size:clamp(44px,5.8vw,74px);line-height:.9;letter-spacing:-.04em;font-weight:700}
.t-title{font-family:var(--display);font-size:22px;line-height:28px;letter-spacing:-.015em;font-weight:700}
.t-heading{font-size:17px;line-height:22px;letter-spacing:-.01em;font-weight:600}
.t-body{font-size:15px;line-height:20px;font-weight:400}
.t-foot{font-size:13px;line-height:18px;font-weight:500}
.t-cap{font-size:12px;line-height:16px;font-weight:500}
.t-wordmark{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.05em;font-weight:700;color:var(--red)}

/* ═══ Focus ═══
   One ring for everything: 2px --focus at 2px offset. The fields draw it as a
   box-shadow so the ring follows their radius. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ═══ Motion ═══
   Entrances only, and nothing loops more than three times. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}