/* ============================================================
   SiteFX — brand tokens                                    v0.4
   Three colours, nothing else:

     Ink     #07080A
     Bone    #ECE8DF
     Signal  #C8FF2E

   Every other value below is one of the three, a mix of Ink and
   Bone (panels, hairlines, secondary text), a mix of Ink into
   Signal (Volt panels), or one of them made transparent.

   The semantic layer (--bg, --fg, --accent…) is what pages and
   effects use, and each theme redefines it:
     ink   Bone type on Ink, Signal is "on"
     bone  Ink type on Bone, Ink is "on"
     volt  Ink type on Signal, Ink is "on"

   Text contrast, worst case on any surface (AA is 4.5):
     ink   fg 16.4 · fg-2 9.0 · fg-3 4.8 · accent 17.0
     bone  fg 16.4 · fg-2 9.1 · fg-3 4.8 · accent 16.4
     volt  fg 17.0 · fg-2 10.0 · fg-3 5.5 · accent 17.0
   ============================================================ */
:root {
  /* The palette */
  --ink:    #07080A;
  --bone:   #ECE8DF;
  --signal: #C8FF2E;

  /* Type
     Science Gothic: display and kinetic; width 50–200, weight 100–900, Cyrillic.
     Geist: reading. Geist Mono: readouts, labels, code. */
  --f-display: 'Science Gothic', 'Geist', system-ui, sans-serif;
  --f-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-body:  clamp(16px, 1.05vw, 18px);
  --t-small: 14px;
  --t-label: 11px;

  /* Space, on a 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 3.2vw, 48px);

  /* Motion */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.87, 0, .13, 1);
  --d-fast: 160ms;  --d-base: 280ms;  --d-slow: 640ms;

  /* Shape: pro gear, so corners are nearly square */
  --r-1: 2px;  --r-2: 4px;

  /* Lock-on plates: a box the cursor locks onto flips to one of the
     three (never the page's own theme). Each name is a theme below,
     so the box carries that theme's checked colours. */
  --lock-tints: ink #07080A, bone #ECE8DF, volt #C8FF2E;
}

/* Each theme also answers to data-fx-tint, so any element can wear
   one: a locked box with data-fx-tint="volt" is a small Volt page. */

/* ---- Ink (default) ---- */
:root, [data-theme="ink"], [data-fx-tint="ink"] {
  color-scheme: dark;
  --bg: #07080A;            --panel: #0F1011;          --panel-2: #171819;       --panel-3: #202121;   /* Bone 3.5 / 7 / 11% into Ink */
  --fg: #ECE8DF;            --fg-2: #B5B2AC;           --fg-3: #878581;                                /* Bone 100 / 76 / 56% */
  --rule: #2E2E2E;          --rule-2: #40403F;                                                         /* Bone 17 / 25% */
  --accent: #C8FF2E;        --on-accent: #07080A;      --glow: rgb(200 255 46 / .35);
  --rec: #C8FF2E;           --warn: #ECE8DF;
  --logo-ink: #ECE8DF;      --logo-bracket: #C8FF2E;
  --rain-ink: rgb(236 232 223 / .16);  --rain-head: rgb(200 255 46 / .9);
  --field-ink: rgb(236 232 223 / .75); --field-accent: #C8FF2E; --field-blend: lighter;
}

/* ---- Bone ---- */
[data-theme="bone"], [data-fx-tint="bone"] {
  color-scheme: light;
  --bg: #ECE8DF;            --panel: #E2DED5;          --panel-2: #D9D5CD;       --panel-3: #CDCAC2;   /* Ink 4.5 / 8.5 / 13.5% into Bone */
  --fg: #07080A;            --fg-2: #353535;           --fg-3: #595957;                                /* Ink 100 / 80 / 64% */
  --rule: #CECBC3;          --rule-2: #BAB7B0;                                                         /* Ink 13 / 22% */
  --accent: #07080A;        --on-accent: #ECE8DF;      --glow: rgb(7 8 10 / .2);
  --rec: #07080A;           --warn: #07080A;
  --logo-ink: #07080A;      --logo-bracket: #07080A;
  --rain-ink: rgb(7 8 10 / .13);       --rain-head: rgb(7 8 10 / .8);
  --field-ink: rgb(7 8 10 / .62);      --field-accent: #07080A;  --field-blend: source-over;
}

/* ---- Volt ---- */
[data-theme="volt"], [data-fx-tint="volt"] {
  color-scheme: light;
  --bg: #C8FF2E;            --panel: #BEF32C;          --panel-2: #B5E62A;       --panel-3: #A9D728;   /* Ink 5 / 10 / 16% into Signal */
  --fg: #07080A;            --fg-2: #2A3410;           --fg-3: #455716;                                /* Ink 100 / 82 / 68% */
  --rule: rgb(7 8 10 / .2); --rule-2: rgb(7 8 10 / .34);
  --accent: #07080A;        --on-accent: #C8FF2E;      --glow: rgb(7 8 10 / .18);
  --rec: #07080A;           --warn: #07080A;
  --logo-ink: #07080A;      --logo-bracket: #07080A;
  --rain-ink: rgb(7 8 10 / .14);       --rain-head: rgb(7 8 10 / .85);
  --field-ink: rgb(7 8 10 / .7);       --field-accent: #07080A;  --field-blend: source-over;
}