/* ============================================================================
   BLOWTRUMPET PLATFORM DESIGN SYSTEM — OPTION B "PLATE"
   tokens.css · v3.0.0 · 2026-09-02
   ----------------------------------------------------------------------------
   Rebuilt on OPTION A's TOKEN LAYER. The neutrals, the grounds, the semantic
   scale, the base accent marks, the spacing ramp and the radius system are
   Option A's, unchanged. Option B adds exactly three things:

     1. a display face for headings — DIN 1451 Mittelschrift
     2. ACCENT ENERGY that follows the ground: soft in Light and Comfort,
        high-contrast in Dark
     3. a button family, a plate block, and the theme switch

   THEME — one switch, three options, one attribute.

     data-theme = (unset) | "light" | "comfort" | "dark"

       (unset)    AUTO — light OS -> Light, dark OS -> Comfort
       "light"    soft off-white #F4F5F4
       "comfort"  charcoal       #121719
       "dark"     true black     #000406 — the terminal

     class="bt-terminal" gives one region terminal treatment inside any theme.

   Every token is declared in :root first. Components read tokens only.
   ========================================================================== */

:root {
  /* ---- Base marks · Option A's, unchanged --------------------------------
     Fixed for logos, favicons and print spot colour. Never used raw on a
     surface — each theme applies its own tuned value below.                 */
  --bt-the-edit-base:       #F2740B;
  --bt-ravaki-base:       #7B5CF0;
  --bt-tejaki-base:       #2FA84F;
  --bt-vedoki-base:       #2C7BE5;
  --bt-soa-base:          #E03B3B;
  --bt-blowtrumpet-base:  #4BADB6;

  /* ---- ACCENT ENERGY · LIGHT — soft -------------------------------------
     Chroma pulled back and value deepened. On an off-white ground a fully
     saturated mark shouts; these sit in the page, clear 4.5:1 as text, and
     read as ink rather than signage.                                        */
  --bt-the-edit:       #B0591A;
  --bt-ravaki:       #5F4BB8;
  --bt-tejaki:       #2A7146;
  --bt-vedoki:       #2A5FA8;
  --bt-soa:          #A93F3F;
  --bt-blowtrumpet:  #2C7A82;

  --bt-the-edit-wash:      #F7EDE4;
  --bt-ravaki-wash:      #EEEBF7;
  --bt-tejaki-wash:      #E7F0EA;
  --bt-vedoki-wash:      #E7EDF6;
  --bt-soa-wash:         #F7EAEA;
  --bt-blowtrumpet-wash: #E5F0F1;

  /* No glow on a light ground — the token exists so components can reference
     it unconditionally. */
  --bt-accent-glow: 0 0 0 0 transparent;
  --bt-accent-weight: 1px;   /* accent hairline width, by theme */

  /* ---- Neutrals · Option A's light palette ------------------------------- */
  --bt-ground:         #F4F5F4;
  --bt-surface:        #FBFBFA;
  --bt-surface-sunken: #EAEDEC;
  --bt-surface-inset:  #FFFFFF;
  --bt-line:           #DBDFDE;
  --bt-line-strong:    #B6BEBC;
  --bt-text:           #0F1513;
  --bt-text-2:         #434F4C;
  --bt-text-3:         #6C7A77;
  --bt-text-inverse:   #F7F9F8;
  --bt-overlay:        rgba(15, 21, 19, 0.44);

  /* Theme-stable ink & paper — do not flip with the ground, so a
     "light on dark" button keeps its identity in every theme.               */
  --bt-ink-max:    #0B100E;
  --bt-paper-max:  #FFFFFF;
  --bt-ink-soft:   rgba(11, 16, 14, 0.14);
  --bt-paper-soft: rgba(255, 255, 255, 0.18);
  --bt-cta-ink:    #FFFFFF;

  /* ---- Semantic state · Option A's, softened to match -------------------- */
  --bt-positive:      #2A7146;  --bt-positive-wash: #E7F0EA;
  --bt-warning:       #8A6011;  --bt-warning-wash:  #F7F0DF;
  --bt-critical:      #A93F3F;  --bt-critical-wash: #F7EAEA;
  --bt-info:          #2A5FA8;  --bt-info-wash:     #E7EDF6;
  --bt-neutral-wash:  #EAEDEC;

  --bt-up: #2A7146;  --bt-down: #A93F3F;  --bt-flat: #6C7A77;
  --bt-up-wash:   rgba(42, 113, 70, 0.09);
  --bt-down-wash: rgba(169, 63, 63, 0.09);

  --bt-focus:      #2A5FA8;
  --bt-focus-ring: 0 0 0 2px var(--bt-ground), 0 0 0 4px var(--bt-focus);

  --bt-shadow-1: 0 1px 2px rgba(15, 21, 19, 0.06);
  --bt-shadow-2: 0 4px 14px rgba(15, 21, 19, 0.10);
  --bt-shadow-3: 0 18px 48px rgba(15, 21, 19, 0.16);

  /* ---- Typography --------------------------------------------------------
     DIN 1451 MITTELSCHRIFT — the German plate face. "Mittelschrift" means
     medium width, so the target is SEMI-condensed, not condensed: the
     narrower cut on a plate is Engschrift, a different face for a shorter
     registration. D-DIN is Datto's SIL OFL digitisation of Mittelschrift and
     is what should be self-hosted; Barlow Semi Condensed is the closest thing
     served by a CDN, at the right width class, with DIN's flat terminals and
     open apertures.                                                          */
  --bt-font-display: "D-DIN", "DIN 1451 Mittelschrift", "Barlow Semi Condensed", "Saira Semi Condensed", "IBM Plex Sans Condensed", Impact, sans-serif;
  --bt-font-plate:   "IBM Plex Sans Condensed", "Barlow Semi Condensed", Helvetica, Arial, sans-serif;
  --bt-font-ui:      "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bt-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bt-font-doc:     "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --bt-track-display: 0.02em;
  --bt-track-plate:   0.08em;   /* the uppercase plate setting */
  --bt-track-label:   0.09em;

  /* Option A's scale, unchanged. */
  --bt-size-1:  11px;  --bt-size-2:  12px;  --bt-size-3:  13px;
  --bt-size-4:  15px;  --bt-size-5:  17px;  --bt-size-6:  21px;
  --bt-size-7:  26px;  --bt-size-8:  33px;  --bt-size-9:  42px;
  --bt-size-10: 54px;

  --bt-lh-tight: 1.08;  --bt-lh-snug: 1.28;  --bt-lh-normal: 1.5;  --bt-lh-relaxed: 1.65;
  --bt-measure: 65ch;

  /* ---- Space · Option A's 4px ramp --------------------------------------- */
  --bt-s1: 4px;   --bt-s2: 8px;   --bt-s3: 12px;  --bt-s4: 16px;
  --bt-s5: 24px;  --bt-s6: 32px;  --bt-s7: 48px;  --bt-s8: 64px;  --bt-s9: 96px;

  /* Gutters and margins carry the +20% air asked for earlier. Set --bt-air
     to 1 for Option A's original spacing; print already does. */
  --bt-air: 1.2;
  --bt-gutter:       calc(var(--bt-s4) * var(--bt-air));
  --bt-gutter-wide:  calc(var(--bt-s5) * var(--bt-air));
  --bt-gutter-tight: calc(var(--bt-s3) * var(--bt-air));
  --bt-margin:       calc(var(--bt-s5) * var(--bt-air));
  --bt-pad-tile:     calc(var(--bt-s4) * var(--bt-air));
  --bt-pad-panel:    calc(var(--bt-s5) * var(--bt-air));
  --bt-rhythm:       calc(var(--bt-s8) * var(--bt-air));

  --bt-r-0: 0px;  --bt-r-1: 3px;  --bt-r-2: 6px;  --bt-r-3: 14px;  --bt-r-full: 999px;

  --bt-grid-cols: 12;
  --bt-max: 1440px;
  --bt-max-doc: 74ch;
  --bt-rail: 264px;
  --bt-border: 1px;

  --bt-ease: cubic-bezier(0.2, 0, 0, 1);
  --bt-fast: 120ms;
  --bt-slow: 320ms;

  --bt-row-h: 36px;

  color-scheme: light;
}

/* ============================================================================
   AUTO — no data-theme set. A dark OS lands on COMFORT, never straight on the
   terminal: true black is a choice.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* ACCENT ENERGY · COMFORT — soft. Muted, never luminous: this palette is
       for reading, and a glowing accent in a paragraph is a distraction. */
    --bt-the-edit: #E0A06B;  --bt-ravaki: #A796DC;  --bt-tejaki: #79C293;
    --bt-vedoki: #8CACD8;  --bt-soa:    #DB9191;  --bt-blowtrumpet: #79B4BA;
    --bt-the-edit-wash: #241A11; --bt-ravaki-wash: #1D1A2E; --bt-tejaki-wash: #12241A;
    --bt-vedoki-wash: #151F2C; --bt-soa-wash: #261718;    --bt-blowtrumpet-wash: #13252A;
    --bt-accent-glow: 0 0 0 0 transparent;
    --bt-accent-weight: 1px;
    --bt-ground: #121719;  --bt-surface: #1A2124;  --bt-surface-sunken: #0D1214;
    --bt-surface-inset: #0D1214;
    --bt-line: #2A3437;    --bt-line-strong: #43524F;
    --bt-text: #EDF1F0;    --bt-text-2: #AEBBB9;   --bt-text-3: #82918F;
    --bt-text-inverse: #0F1513;  --bt-overlay: rgba(0,0,0,0.62);
    --bt-ink-max: #05090A;  --bt-paper-max: #F1F6F5;
    --bt-ink-soft: rgba(0,0,0,0.5);  --bt-paper-soft: rgba(241,246,245,0.2);
    --bt-cta-ink: #06100C;
    --bt-positive: #79C293;  --bt-positive-wash: #12241A;
    --bt-warning:  #DCB472;  --bt-warning-wash:  #262009;
    --bt-critical: #DB9191;  --bt-critical-wash: #261718;
    --bt-info:     #8CACD8;  --bt-info-wash:     #151F2C;
    --bt-neutral-wash: #0D1214;
    --bt-up: #79C293;  --bt-down: #DB9191;  --bt-flat: #82918F;
    --bt-up-wash: rgba(121,194,147,0.10);  --bt-down-wash: rgba(219,145,145,0.10);
    --bt-focus: #8CACD8;
    --bt-shadow-1: 0 1px 2px rgba(0,0,0,0.5);
    --bt-shadow-2: 0 4px 14px rgba(0,0,0,0.55);
    --bt-shadow-3: 0 18px 48px rgba(0,0,0,0.68);
    color-scheme: dark;
  }
}

/* [data-theme="light"] needs no block — :root IS the light palette, and the
   auto block only matches when no data-theme is present. */
:root[data-theme="light"] { color-scheme: light; }

/* ============================================================================
   COMFORT — charcoal, soft accents
   ========================================================================== */
:root[data-theme="comfort"] {
  --bt-the-edit: #E0A06B;  --bt-ravaki: #A796DC;  --bt-tejaki: #79C293;
  --bt-vedoki: #8CACD8;  --bt-soa:    #DB9191;  --bt-blowtrumpet: #79B4BA;
  --bt-the-edit-wash: #241A11; --bt-ravaki-wash: #1D1A2E; --bt-tejaki-wash: #12241A;
  --bt-vedoki-wash: #151F2C; --bt-soa-wash: #261718;    --bt-blowtrumpet-wash: #13252A;
  --bt-accent-glow: 0 0 0 0 transparent;
  --bt-accent-weight: 1px;
  --bt-ground: #121719;  --bt-surface: #1A2124;  --bt-surface-sunken: #0D1214;
  --bt-surface-inset: #0D1214;
  --bt-line: #2A3437;    --bt-line-strong: #43524F;
  --bt-text: #EDF1F0;    --bt-text-2: #AEBBB9;   --bt-text-3: #82918F;
  --bt-text-inverse: #0F1513;  --bt-overlay: rgba(0,0,0,0.62);
  --bt-ink-max: #05090A;  --bt-paper-max: #F1F6F5;
  --bt-ink-soft: rgba(0,0,0,0.5);  --bt-paper-soft: rgba(241,246,245,0.2);
  --bt-cta-ink: #06100C;
  --bt-positive: #79C293;  --bt-positive-wash: #12241A;
  --bt-warning:  #DCB472;  --bt-warning-wash:  #262009;
  --bt-critical: #DB9191;  --bt-critical-wash: #261718;
  --bt-info:     #8CACD8;  --bt-info-wash:     #151F2C;
  --bt-neutral-wash: #0D1214;
  --bt-up: #79C293;  --bt-down: #DB9191;  --bt-flat: #82918F;
  --bt-up-wash: rgba(121,194,147,0.10);  --bt-down-wash: rgba(219,145,145,0.10);
  --bt-focus: #8CACD8;
  --bt-shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --bt-shadow-2: 0 4px 14px rgba(0,0,0,0.55);
  --bt-shadow-3: 0 18px 48px rgba(0,0,0,0.68);
  color-scheme: dark;
}

/* ============================================================================
   DARK — true black, and the accents come up hard.
   This is the one place the marks run at full strength: on #000406 a
   saturated hue is the fastest thing on the screen to find, which is exactly
   what a trading surface needs. Hairlines thicken to 2px and accent-owned
   tiles carry a faint outer glow.
   ========================================================================== */
:root[data-theme="dark"], .bt-terminal {
  --bt-the-edit: #FF9330;  --bt-ravaki: #B39BFF;  --bt-tejaki: #4CF08A;
  --bt-vedoki: #63B4FF;  --bt-soa:    #FF6B6B;  --bt-blowtrumpet: #4FE6F2;
  --bt-the-edit-wash: #241203; --bt-ravaki-wash: #17122E; --bt-tejaki-wash: #04220F;
  --bt-vedoki-wash: #051A31; --bt-soa-wash: #260C0C;    --bt-blowtrumpet-wash: #032428;
  --bt-accent-glow: 0 0 20px -8px var(--bt-accent);
  --bt-accent-weight: 2px;
  --bt-ground: #000406;  --bt-surface: #080D0F;  --bt-surface-sunken: #000000;
  --bt-surface-inset: #000000;
  --bt-line: #172124;    --bt-line-strong: #314246;
  --bt-text: #EAF4F2;    --bt-text-2: #A3B6B3;   --bt-text-3: #708684;
  --bt-text-inverse: #000406;  --bt-overlay: rgba(0,0,0,0.8);
  --bt-ink-max: #000000;  --bt-paper-max: #EAF4F2;
  --bt-ink-soft: rgba(0,0,0,0.7);  --bt-paper-soft: rgba(234,244,242,0.22);
  --bt-cta-ink: #000406;
  --bt-positive: #4CF08A;  --bt-positive-wash: #04220F;
  --bt-warning:  #FFC53D;  --bt-warning-wash:  #261B02;
  --bt-critical: #FF6B6B;  --bt-critical-wash: #260C0C;
  --bt-info:     #63B4FF;  --bt-info-wash:     #051A31;
  --bt-neutral-wash: #0B1113;
  --bt-up: #4CF08A;  --bt-down: #FF6B6B;  --bt-flat: #708684;
  --bt-up-wash: rgba(76,240,138,0.16);  --bt-down-wash: rgba(255,107,107,0.16);
  --bt-focus: #4FE6F2;
  --bt-shadow-1: 0 0 0 1px rgba(255,255,255,0.04);
  --bt-shadow-2: 0 4px 18px rgba(0,0,0,0.8);
  --bt-shadow-3: 0 18px 48px rgba(0,0,0,0.9);
  --bt-row-h: 30px;
  color-scheme: dark;
}

/* ---------- Product scopes ------------------------------------------------ */
:root, [data-product]          { --bt-accent: var(--bt-blowtrumpet); --bt-accent-wash: var(--bt-blowtrumpet-wash); }
[data-product="the-edit"]        { --bt-accent: var(--bt-the-edit);      --bt-accent-wash: var(--bt-the-edit-wash); }
[data-product="ravaki"]        { --bt-accent: var(--bt-ravaki);      --bt-accent-wash: var(--bt-ravaki-wash); }
[data-product="tejaki"]        { --bt-accent: var(--bt-tejaki);      --bt-accent-wash: var(--bt-tejaki-wash); }
[data-product="vedoki"]        { --bt-accent: var(--bt-vedoki);      --bt-accent-wash: var(--bt-vedoki-wash); }
[data-product="state-of-ads"]  { --bt-accent: var(--bt-soa);         --bt-accent-wash: var(--bt-soa-wash); }
[data-product="blowtrumpet"]   { --bt-accent: var(--bt-blowtrumpet); --bt-accent-wash: var(--bt-blowtrumpet-wash); }
[data-product="founders-blog"] { --bt-accent: var(--bt-text-2);      --bt-accent-wash: var(--bt-neutral-wash); }

/* ---------- Density ------------------------------------------------------- */
[data-density="compact"] { --bt-row-h: 28px; }
[data-density="relaxed"] { --bt-row-h: 44px; }