/* ============================================================
   COLORS — Unreal
   A strict monochrome system. Black is primary, white is
   secondary, and the neutral charcoal ramp IS the palette.
   No hues. The only sanctioned "gradient" is a subtle charcoal
   wash + cinematic black scrims over photography.

   Scale direction: LUMINANCE.
     --ink-000 = pure black (canvas)  →  --ink-999 = pure white
   Higher number = lighter. Contrast itself is the accent.
   ============================================================ */

:root {
  /* ---- Absolutes ---- */
  --black: #000000;
  --white: #FFFFFF;

  /* ---- Ink ramp · black → white (the whole palette) ---- */
  --ink-000: #000000;   /* pure black — deepest canvas / inset */
  --ink-050: #0A0A0B;   /* base canvas (a hair off black) */
  --ink-100: #101012;   /* raised surface */
  --ink-150: #161618;   /* card */
  --ink-200: #1D1D20;   /* elevated card / input */
  --ink-300: #26262A;   /* graphite fills / placeholder */
  --ink-400: #34343A;   /* strong fill / disabled */
  --ink-500: #4A4A52;   /* muted icon / faint label */
  --ink-600: #6B6B74;   /* tertiary / meta text */
  --ink-700: #8E8E98;   /* secondary-quiet text */
  --ink-800: #B7B7BF;   /* secondary text on dark */
  --ink-850: #D2D2D7;   /* high-emphasis muted */
  --ink-900: #E6E6E8;   /* near-white */
  --ink-950: #F4F4F2;   /* off-white */
  --ink-999: #FFFFFF;   /* pure white */

  /* ---- Hairlines · white-alpha borders on dark ---- */
  --line-1: rgba(255,255,255,0.06);  /* faintest structural rule */
  --line-2: rgba(255,255,255,0.10);  /* default border */
  --line-3: rgba(255,255,255,0.16);  /* visible / hover border */
  --line-4: rgba(255,255,255,0.28);  /* strong divider */

  /* ---- Hairlines · black-alpha borders on light ---- */
  --line-on-light-1: rgba(0,0,0,0.06);
  --line-on-light-2: rgba(0,0,0,0.10);
  --line-on-light-3: rgba(0,0,0,0.16);
  --line-on-light-4: rgba(0,0,0,0.26);

  /* ---- Washes · hover/press fills ---- */
  --wash-up-1: rgba(255,255,255,0.04);  /* lighten on dark */
  --wash-up-2: rgba(255,255,255,0.07);
  --wash-up-3: rgba(255,255,255,0.12);
  --wash-dn-1: rgba(0,0,0,0.04);         /* darken on light */
  --wash-dn-2: rgba(0,0,0,0.08);
  --wash-dn-3: rgba(0,0,0,0.16);

  /* ---- Cinematic scrims · full-bleed image protection ---- */
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 32%, rgba(0,0,0,0) 70%);   /* @kind other */
  --scrim-top:    linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0) 60%);                       /* @kind other */
  --scrim-full:   linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.10) 42%, rgba(0,0,0,0.74) 100%);/* @kind other */
  /* The only sanctioned "gradient" — a subtle charcoal wash */
  --charcoal-wash: linear-gradient(160deg, #1A1A1E 0%, #101012 58%, #060608 100%);                          /* @kind other */
  --spotlight:     radial-gradient(120% 90% at 78% 8%, #2A2A2E 0%, #131315 46%, #000 100%);                 /* @kind other */

  /* ============================================================
     SEMANTIC TOKENS — default theme is DARK (black canvas).
     ============================================================ */

  /* Surfaces */
  --surface-canvas:   var(--ink-050);
  --surface-raised:   var(--ink-100);
  --surface-card:     var(--ink-150);
  --surface-elevated: var(--ink-200);
  --surface-inset:    var(--ink-000);
  --surface-inverse:  var(--ink-999);

  /* Text */
  --text-primary:   #FAFAFB;
  --text-secondary: var(--ink-800);
  --text-tertiary:  var(--ink-700);
  --text-quiet:     var(--ink-600);
  --text-disabled:  var(--ink-500);
  --text-inverse:   var(--ink-000);
  --text-on-accent: var(--ink-000);

  /* Borders / lines */
  --border-subtle:  var(--line-1);
  --border-default: var(--line-2);
  --border-strong:  var(--line-3);
  --border-focus:   var(--ink-999);

  /* Accent = white (the one loud move in a black system) */
  --accent:         var(--ink-999);
  --accent-hover:   var(--ink-950);
  --accent-press:   var(--ink-850);
  --accent-muted:   var(--wash-up-3);

  /* Action / button intents */
  --action-fill:        var(--ink-999);   /* primary fill = white */
  --action-fill-text:   var(--ink-000);   /* black label on white */
  --action-fill-hover:  var(--ink-950);
  --action-fill-press:  var(--ink-850);
  --action-ghost-hover: var(--wash-up-2);
  --action-ghost-text:  var(--text-primary);

  /* Fills (hover/press washes) */
  --fill-hover:  var(--wash-up-2);
  --fill-press:  var(--wash-up-3);
  --fill-ghost:  var(--wash-up-1);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--ink-050), 0 0 0 4px rgba(255,255,255,0.64);   /* @kind shadow */

  /* The single functional accent. Data and state only —
     chart strokes/markers, live-test progress fills, range thumb,
     prediction-outcome rail. Forbidden on chrome. */
  --data-accent:        #6FA6E4;
  --data-accent-quiet:  rgba(111,166,228,0.22);
  --data-accent-rail:   rgba(111,166,228,0.55);
}
@supports (color: oklch(0% 0 0)) {
  :root {
    --data-accent:        oklch(74% 0.105 246);
    --data-accent-quiet:  oklch(74% 0.105 246 / 0.22);
    --data-accent-rail:   oklch(74% 0.105 246 / 0.55);
  }
}

/* ---- LIGHT THEME — white canvas, black ink (press / editorial) ---- */
[data-theme="light"] {
  --surface-canvas:   #FCFCFD;
  --surface-raised:   var(--ink-999);
  --surface-card:     var(--ink-999);
  --surface-elevated: var(--ink-999);
  --surface-inset:    #F2F2F4;
  --surface-inverse:  var(--ink-000);

  --text-primary:   var(--ink-000);
  --text-secondary: #3A3A42;
  --text-tertiary:  #6B6B74;
  --text-quiet:     #8E8E98;
  --text-disabled:  #B7B7BF;
  --text-inverse:   var(--ink-999);
  --text-on-accent: var(--ink-999);

  --border-subtle:  var(--line-on-light-1);
  --border-default: var(--line-on-light-2);
  --border-strong:  var(--line-on-light-3);
  --border-focus:   var(--ink-000);

  --accent:         var(--ink-000);
  --accent-hover:   #1D1D20;
  --accent-press:   #34343A;
  --accent-muted:   var(--wash-dn-2);

  --action-fill:        var(--ink-000);
  --action-fill-text:   var(--ink-999);
  --action-fill-hover:  #1D1D20;
  --action-fill-press:  #34343A;
  --action-ghost-hover: var(--wash-dn-1);
  --action-ghost-text:  var(--ink-000);

  --fill-hover:  var(--wash-dn-1);
  --fill-press:  var(--wash-dn-2);
  --fill-ghost:  var(--wash-dn-1);

  --focus-ring: 0 0 0 2px #FCFCFD, 0 0 0 4px rgba(0,0,0,0.48);   /* @kind shadow */

  --data-accent:        #2E6FC4;
  --data-accent-quiet:  rgba(46,111,196,0.16);
  --data-accent-rail:   rgba(46,111,196,0.50);
}
@supports (color: oklch(0% 0 0)) {
  [data-theme="light"] {
    --data-accent:        oklch(52% 0.130 250);
    --data-accent-quiet:  oklch(52% 0.130 250 / 0.16);
    --data-accent-rail:   oklch(52% 0.130 250 / 0.50);
  }
}