/* ============================================================================
   Locked Up Music — token source of truth  (lockedup-brand-v1)
   Hand-maintained. Ramps were derived in oklch from the sampled mark; every
   value below is measured, not eyeballed. deploy.sh refuses to ship this file
   if any declaration is malformed.

   The supplied mark is pure greyscale — max saturation 0.0000 across 256
   distinct values, 28.69% ink / 68.91% paper. It yields two seeds and NO
   accent hue, so the accent below is an approved decision, not a sample:

     ACCENT A — Hazard Acid, oklch hue 133.  Approved 2026-09-05.

   #000000 and #FFFFFF are reserved for the mark itself and are deliberately
   NOT semantic roles. Surfaces use the toned ink ramp (hue 92) so full-page
   fields read as paper and press ink rather than glaring screen black/white.

   Three-state rule: bare :root carries the COMPLETE light palette; the two
   dark selectors redefine tokens only. No colour is defined only inside a
   media query or a [data-theme] block.

   No single accent value clears contrast on both grounds — acid-300 is
   11.51:1 on dark but 1.59:1 on light. Each theme draws a different step.
   ============================================================================ */

:root {
  /* ---- 1. Palette ramps (theme-independent raw values) -------------------- */
  --ink-0:   oklch(0.995 0.002 92);      /* #FEFDFC */
  --ink-50:  oklch(0.975 0.004 92);      /* #F8F7F4 */
  --ink-100: oklch(0.955 0.006 92);      /* #F1F0EC */
  --ink-150: oklch(0.925 0.007 92);      /* #E8E6E1 */
  --ink-200: oklch(0.880 0.008 92);      /* #D9D7D2 */
  --ink-300: oklch(0.795 0.009 92);      /* #BEBCB6 */
  --ink-400: oklch(0.700 0.010 92);      /* #A09E98 */
  --ink-500: oklch(0.560 0.010 92);      /* #76746E */
  --ink-600: oklch(0.440 0.009 92);      /* #54524D */
  --ink-700: oklch(0.382 0.008 92);      /* #44433E */
  --ink-800: oklch(0.300 0.007 92);      /* #2F2E2A */
  --ink-850: oklch(0.248 0.006 92);      /* #22211E */
  --ink-900: oklch(0.196 0.005 92);      /* #161513 */
  --ink-950: oklch(0.152 0.004 92);      /* #0C0C0A */
  --ink-1000: oklch(0.115 0.003 92);      /* #050504 */
  --acid-50:  oklch(0.972 0.058 133);     /* #E7FFD7 */
  --acid-100: oklch(0.938 0.140 133);     /* #C6FF9C */
  --acid-200: oklch(0.884 0.210 133);     /* #9FF552 */
  --acid-300: oklch(0.812 0.210 133);     /* #89DC34 */
  --acid-400: oklch(0.726 0.204 133);     /* #70BF04 */
  --acid-500: oklch(0.648 0.182 133);     /* #5FA403 */
  --acid-600: oklch(0.566 0.160 133);     /* #4E8900 */
  --acid-700: oklch(0.486 0.136 133);     /* #3E6E02 */
  --acid-800: oklch(0.404 0.114 133);     /* #2E5500 */
  --acid-900: oklch(0.330 0.094 133);     /* #213F00 */
  --acid-950: oklch(0.252 0.074 133);     /* #132900 */
  /* Recorded brand constants. Reserved for the mark. NOT semantic roles. */
  --mark-ink:   #000000;
  --mark-paper: #FFFFFF;

  /* ---- 2. Semantic colour — LIGHT (complete, on bare :root) --------------- */
  --surface-page:      var(--ink-50);
  --surface-raised:    var(--ink-0);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-950);

  --text-primary:      var(--ink-900);   /* 17.03:1  AAA */
  --text-muted:        var(--ink-600);   /*  7.28:1  AAA */
  --text-inverse:      var(--ink-50);
  --text-on-accent:    var(--ink-50);

  --border-default:    var(--ink-200);
  --border-strong:     var(--ink-900);

  --accent:            var(--acid-700);  /*  5.70:1  AA  */
  --accent-hover:      var(--acid-800);
  --accent-surface:    var(--acid-50);
  --focus-ring:        var(--acid-700);

  /* ---- 3. Type ----------------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step-display-xl: 72px;  --lh-display-xl: 72px;
  --step-display-l:  56px;  --lh-display-l:  56px;
  --step-display-m:  40px;  --lh-display-m:  44px;
  --step-display-s:  28px;  --lh-display-s:  32px;
  --step-heading:    20px;  --lh-heading:    24px;
  --step-body-l:     18px;  --lh-body-l:     28px;
  --step-body:       16px;  --lh-body:       24px;
  --step-body-s:     14px;  --lh-body-s:     20px;
  --step-mono:       13px;  --lh-mono:       20px;
  --step-micro:      11px;  --lh-micro:      16px;
  --track-micro: 0.14em;  --track-label: 0.10em;  --track-button: 0.06em;

  /* ---- 4. Space — 4px baseline. A value not here is a bug. --------------- */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-8: 32px;  --s-10:40px;  --s-12:48px;  --s-16:64px;
  --s-20:80px;  --s-24:96px;  --s-32:128px;

  /* ---- 5. Edges — the mark is cut and stencilled. Radius is 0. ----------- */
  /* Hero watermark. 0.06 white on the dark ground and 0.06 black on the light
     one are NOT equal weight — the light one measures only 67% of the dark's
     oklch-L delta. 0.10 brings it to parity with a little headroom. */
  --wm-opacity:   0.10;
  /* The wordmark rides above the silhouette in the accent colour. Light needs
     far more alpha than dark for equal weight — acid-700 on paper has less
     luminance range to travel than acid-300 on near-black. Measured, matched. */
  --wm-word-opacity: 0.73;

  --radius:       0;
  --radius-field: 2px;    /* sole exception: form fields on Android */
  --radius-overlay: 14px; /* floating chrome only — modals, popovers. Never
                             page surfaces, cards, or anything that reads as
                             printed. Approved 2026-09-06. */
  --hairline:     1px;
  --rule:         2px;
  --control-h:    48px;
  --control-h-lg: 72px;
}

/* ---- Dark, by system preference (loses to an explicit light choice) ------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:    var(--ink-950);
    --surface-raised:  var(--ink-900);
    --surface-sunken:  var(--ink-1000);
    --surface-inverse: var(--ink-50);

    --text-primary:    var(--ink-100);   /* 17.17:1  AAA */
    --text-muted:      var(--ink-400);   /*  7.31:1  AAA */
    --text-inverse:    var(--ink-950);
    --text-on-accent:  var(--ink-950);

    --border-default:  var(--ink-800);
    --border-strong:   var(--ink-100);

    --accent:          var(--acid-300);  /* 11.51:1  AAA */
    --accent-hover:    var(--acid-200);
    --accent-surface:  var(--ink-900);
    --focus-ring:      var(--acid-300);
    --wm-opacity:      0.06;
  --wm-word-opacity: 0.50;
    --wm-word-opacity: 0.50;
  }
}

/* ---- Dark, chosen explicitly (wins in both directions) -------------------- */
:root[data-theme="dark"] {
  --surface-page:    var(--ink-950);
  --surface-raised:  var(--ink-900);
  --surface-sunken:  var(--ink-1000);
  --surface-inverse: var(--ink-50);

  --text-primary:    var(--ink-100);
  --text-muted:      var(--ink-400);
  --text-inverse:    var(--ink-950);
  --text-on-accent:  var(--ink-950);

  --border-default:  var(--ink-800);
  --border-strong:   var(--ink-100);

  --accent:          var(--acid-300);
  --accent-hover:    var(--acid-200);
  --accent-surface:  var(--ink-900);
  --focus-ring:      var(--acid-300);
  --wm-opacity:      0.06;
  --wm-word-opacity: 0.50;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}