/* ============================================================
   LEE COGSWELL DESIGN — DESIGN TOKENS
   Tier 1: primitives  (raw values, named for what they are)
   Tier 2: semantic    (named for the job they do)
   Tier 3: component   (named for where they're used)

   This is the ONLY file where raw values live. site.css, dash.css
   and site.js all read from here. Surface type: WEBSITE, dark.
   ============================================================ */

:root {

  /* ========================================================
     TIER 1 — PRIMITIVES
     ======================================================== */

  /* Brand blue — sampled from the ninja mark (≈ blue-700). Ramp in
     OKLCH so the steps stay perceptually even. */
  --blue-100: oklch(94% 0.030 265);
  --blue-300: oklch(80% 0.090 265);   /* text-safe on dark */
  --blue-400: oklch(68% 0.150 265);
  --blue-500: oklch(54% 0.200 265);   /* interactive fills */
  --blue-700: oklch(38% 0.160 265);   /* the mark's blue   */
  --blue-900: oklch(24% 0.090 265);

  /* Brand sand — the mask's tan. Warm counterpoint, used sparingly. */
  --sand-100: oklch(95% 0.025 75);
  --sand-300: oklch(86% 0.055 72);
  --sand-500: oklch(78% 0.075 70);    /* eyebrows, labels  */
  --sand-700: oklch(60% 0.080 65);
  --sand-900: oklch(38% 0.050 60);

  /* Danger — even an all-brand palette needs one */
  --red-300: oklch(72% 0.115 29);
  --red-500: oklch(55% 0.170 29);
  --red-700: oklch(45% 0.150 29);

  /* Success — form confirmation */
  --green-300: oklch(80% 0.120 150);

  /* Neutrals — cool, to sit with the blue. The artwork was exported on
     #08080a, so --art-black exists as a real primitive: tiles use it so
     the art's own background and the tile are one surface. */
  --neutral-50:  #f7f7f8;
  --neutral-100: #ececee;
  --neutral-300: #b6b7bc;
  --neutral-400: #8f9096;
  --neutral-500: #6f7076;
  --neutral-600: #232326;
  --neutral-700: #1a1a1e;
  --neutral-800: #131317;
  --neutral-900: #0d0d10;
  --art-black:   #08080a;   /* the exact black the artwork was exported on */
  --black:       #000000;
  --white:       #ffffff;


  /* ========================================================
     TIER 2 — SEMANTIC
     ======================================================== */

  /* --- Color: brand roles --- */
  --color-accent:            var(--blue-500);   /* fills + display only */
  --color-accent-hover:      var(--blue-400);
  --color-accent-soft:       var(--blue-300);
  --color-accent-subtle:     var(--blue-900);
  --color-accent-on-dark:    var(--blue-300);   /* links, small text   */
  --color-accent-on-light:   var(--blue-700);
  --color-mark:              var(--blue-700);   /* the logo square      */

  --color-secondary:         var(--sand-500);
  --color-secondary-hover:   var(--sand-300);
  --color-secondary-deep:    var(--sand-900);
  --color-secondary-on-dark: var(--sand-300);

  --color-danger:            var(--red-500);
  --color-danger-hover:      var(--red-700);
  --color-danger-on-dark:    var(--red-300);
  --color-danger-on-light:   var(--red-700);
  --color-success-on-dark:   var(--green-300);

  /* --- Color: surfaces --- */
  --color-surface:           var(--neutral-900);   /* page            */
  --color-surface-alt:       var(--neutral-800);   /* footer, panels  */
  --color-surface-raised:    var(--neutral-700);   /* cards, fields   */
  --color-surface-deep:      var(--art-black);     /* work tiles — matches the art */
  --color-surface-light:     var(--neutral-50);
  --color-surface-lighter:   var(--white);

  /* --- Color: text (dark-surface defaults) --- */
  --color-text:              var(--neutral-100);
  --color-text-strong:       var(--white);
  --color-text-muted:        var(--neutral-300);
  --color-text-dim:          var(--neutral-400);
  --color-text-faint:        var(--neutral-500);
  --color-text-on-accent:    var(--white);        /* on blue-500: 5.9:1 */
  --color-text-on-light:     var(--neutral-600);
  --color-text-on-light-mut: var(--neutral-500);

  /* --- Color: on-light pairs (dash uses a light editing surface) --- */
  --color-border-on-light:   rgb(0 0 0 / .14);
  --color-field-bg-on-light: var(--white);
  --color-wash-on-light:     rgb(0 0 0 / .04);

  /* --- Color: lines --- */
  --color-border:            color-mix(in srgb, var(--color-text) 14%, transparent);
  --color-border-strong:     color-mix(in srgb, var(--color-text) 28%, transparent);
  --color-hairline:          color-mix(in srgb, var(--color-text) 8%, transparent);
  --color-scrim:             rgb(0 0 0 / .72);
  --color-tile-ring:         color-mix(in srgb, var(--color-text) 10%, transparent);


  /* --- Typography: families ---
     Inter Tight / Inter via Google Fonts, Helvetica Neue as the local
     fallback so the site reads the same if the font request fails. */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Typography: scale (Tailwind steps) --- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */

  /* --- Typography: fluid display --- */
  --display-sm: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);   /* 28 → 40 */
  --display-md: clamp(2.25rem, 1.50rem + 3.4vw, 3.5rem);   /* 36 → 56 */
  --display-lg: clamp(2.75rem, 1.30rem + 6.4vw, 5.25rem);  /* 44 → 84 */
  --display-xl: clamp(3.25rem, 1.60rem + 7.4vw, 5.75rem);  /* 52 → 92 */

  /* --- Typography: weight / leading / tracking --- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-none:    1.05;
  --leading-snug:    1.3;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  --tracking-tighter: -.03em;   /* display type — Helvetica-style set tight */
  --tracking-tight:   -.015em;
  --tracking-normal:  0;
  --tracking-wide:    .08em;
  --tracking-wider:   .14em;
  --tracking-widest:  .22em;

  /* --- Spacing ladder (.25rem base) --- */
  --space-1:  0.25rem;   --space-2:  0.5rem;
  --space-3:  0.75rem;   --space-4:  1rem;
  --space-5:  1.25rem;   --space-6:  1.5rem;
  --space-8:  2rem;      --space-10: 2.5rem;
  --space-12: 3rem;      --space-16: 4rem;
  --space-20: 5rem;      --space-24: 6rem;

  /* --- Layout semantics ---
     "normal" section padding lands at 48px on desktop. */
  --space-section-compact:  clamp(1.5rem, 3.5vw, 2rem);
  --space-section:          clamp(2rem,   5vw,   3rem);
  --space-section-spacious: clamp(3rem,   7vw,   5rem);
  --space-gutter:           clamp(1.25rem, 4vw, 3rem);
  --space-stack:            var(--space-4);
  --space-stack-tight:      var(--space-2);
  --space-grid:             clamp(1rem, 2vw, 1.5rem);
  --space-heading-label:    var(--space-3);

  /* --- Container widths --- */
  --width-prose:   65ch;
  --width-narrow:  45rem;    /* 720  */
  --width-wide:    90rem;    /* 1440 */
  --width-content: var(--width-wide); /* main pages align with header/footer */

  /* --- Column minimums --- */
  --col-min-sm: 15rem;   /* 240 */
  --col-min-md: 19rem;   /* 304 — work tiles */
  --col-min-lg: 26rem;   /* 416 — split panes */

  /* --- Radius --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-full: 999px;

  /* --- Border widths --- */
  --border-thin:   1px;
  --border-base:   1.5px;
  --border-thick:  3px;

  /* --- Shadow --- */
  --shadow-sm:   0 2px 8px rgb(0 0 0 / .35);
  --shadow-card: 0 12px 32px rgb(0 0 0 / .55);
  --shadow-lg:   0 28px 60px rgb(0 0 0 / .65);

  /* --- Aspect ratios: primitives --- */
  --aspect-square:    1 / 1;
  --aspect-photo:     3 / 2;
  --aspect-wide:      16 / 9;
  --aspect-portrait:  4 / 5;
  --aspect-tile-wide: 5 / 3;   /* a 2-column tile matching 4/5 neighbours */

  /* --- Aspect ratios: semantic --- */
  --ratio-media-tile:      var(--aspect-portrait);
  --ratio-media-tile-wide: var(--aspect-tile-wide);
  --ratio-media-portrait:  var(--aspect-portrait);   /* about page mark */
  --ratio-media-split:     var(--aspect-photo);

  /* --- Focal points --- */
  --focal-center: 50% 50%;
  --focal-top:    50% 15%;
  --focal-bottom: 50% 85%;

  /* --- Icon sizes --- */
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;

  /* --- Motion --- */
  --duration-instant: .12s;
  --duration-fast:    .22s;   /* hover, focus            */
  --duration-base:    .38s;   /* drawer, dialog          */
  --duration-slow:    .7s;    /* entrance + scroll reveal */
  --duration-media:   .8s;    /* image fade              */
  --duration-hover-media: .9s;/* tile image ease on hover */

  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);       /* long, soft settle */

  --motion-distance:  1.25rem;
  --motion-stagger:   80ms;
  --motion-scale-hover: 1.035;

  --motion-enter: var(--duration-slow) var(--ease-expo) both;
  --motion-fade:  opacity var(--duration-media) var(--ease-out);

  /* Fail-safe windows — JS reads these off :root */
  --timeout-reveal-failsafe: 3000ms;
  --timeout-media-failsafe:  4000ms;
  --timeout-status-clear:    6000ms;
  --timeout-history-coalesce: 600ms;   /* typing pause that closes one undo step */

  /* --- Layers --- */
  --layer-base:   1;
  --layer-nav:    50;
  --layer-drawer: 100;
  --layer-modal:  200;

  /* --- Breakpoints (reference only) --- */
  --bp-md: 48rem;   /* 768 — the ONE breakpoint used */


  /* ========================================================
     TIER 3 — COMPONENT
     ======================================================== */

  /* Typography roles — the public site consumes these names and the
     validated CMS theme may override them in generated /theme.css. */
  --type-body-family: var(--font-body);
  --type-body-size: var(--text-base);
  --type-body-weight: var(--weight-regular);
  --type-body-style: normal;
  --type-body-line: var(--leading-body);
  --type-body-tracking: var(--tracking-normal);
  --type-body-transform: none;
  --type-body-color: var(--color-text);

  --type-display-lg-family: var(--font-display);
  --type-display-lg-size: var(--display-lg);
  --type-display-lg-weight: var(--weight-semibold);
  --type-display-lg-style: normal;
  --type-display-lg-line: var(--leading-none);
  --type-display-lg-tracking: var(--tracking-tighter);
  --type-display-lg-transform: none;
  --type-display-lg-color: var(--color-text-strong);

  --type-display-md-family: var(--font-display);
  --type-display-md-size: var(--display-md);
  --type-display-md-weight: var(--weight-semibold);
  --type-display-md-style: normal;
  --type-display-md-line: var(--leading-none);
  --type-display-md-tracking: var(--tracking-tighter);
  --type-display-md-transform: none;
  --type-display-md-color: var(--color-text-strong);

  --type-display-sm-family: var(--font-display);
  --type-display-sm-size: var(--display-sm);
  --type-display-sm-weight: var(--weight-semibold);
  --type-display-sm-style: normal;
  --type-display-sm-line: var(--leading-none);
  --type-display-sm-tracking: var(--tracking-tighter);
  --type-display-sm-transform: none;
  --type-display-sm-color: var(--color-text-strong);

  --type-display-xs-family: var(--font-display);
  --type-display-xs-size: var(--text-2xl);
  --type-display-xs-weight: var(--weight-semibold);
  --type-display-xs-style: normal;
  --type-display-xs-line: var(--leading-none);
  --type-display-xs-tracking: var(--tracking-tight);
  --type-display-xs-transform: none;
  --type-display-xs-color: var(--color-text-strong);

  --type-eyebrow-family: var(--font-body);
  --type-eyebrow-size: var(--text-xs);
  --type-eyebrow-weight: var(--weight-semibold);
  --type-eyebrow-style: normal;
  --type-eyebrow-line: var(--leading-body);
  --type-eyebrow-tracking: var(--tracking-wider);
  --type-eyebrow-transform: uppercase;
  --type-eyebrow-color: var(--color-secondary);

  --type-lead-family: var(--font-body);
  --type-lead-size: var(--text-lg);
  --type-lead-weight: var(--weight-regular);
  --type-lead-style: normal;
  --type-lead-line: var(--leading-snug);
  --type-lead-tracking: var(--tracking-normal);
  --type-lead-transform: none;
  --type-lead-color: var(--color-text-muted);

  --type-paragraph-family: var(--font-body);
  --type-paragraph-size: var(--text-base);
  --type-paragraph-weight: var(--weight-regular);
  --type-paragraph-style: normal;
  --type-paragraph-line: var(--leading-body);
  --type-paragraph-tracking: var(--tracking-normal);
  --type-paragraph-transform: none;
  --type-paragraph-color: var(--color-text-muted);

  --type-small-family: var(--font-body);
  --type-small-size: var(--text-sm);
  --type-small-weight: var(--weight-regular);
  --type-small-style: normal;
  --type-small-line: var(--leading-body);
  --type-small-tracking: var(--tracking-normal);
  --type-small-transform: none;
  --type-small-color: var(--color-text-dim);

  --type-micro-family: var(--font-body);
  --type-micro-size: var(--text-xs);
  --type-micro-weight: var(--weight-regular);
  --type-micro-style: normal;
  --type-micro-line: var(--leading-body);
  --type-micro-tracking: var(--tracking-normal);
  --type-micro-transform: none;
  --type-micro-color: var(--color-text-muted);

  --type-field-label-family: var(--font-body);
  --type-field-label-size: var(--text-sm);
  --type-field-label-weight: var(--weight-medium);
  --type-field-label-style: normal;
  --type-field-label-line: var(--leading-body);
  --type-field-label-tracking: var(--tracking-normal);
  --type-field-label-transform: none;
  --type-field-label-color: var(--color-text-muted);

  --type-footer-family: var(--font-body);
  --type-footer-size: var(--text-sm);
  --type-footer-weight: var(--weight-regular);
  --type-footer-style: normal;
  --type-footer-line: var(--leading-body);
  --type-footer-tracking: var(--tracking-normal);
  --type-footer-transform: none;
  --type-footer-color: var(--color-text-muted);

  --type-prose-sub-family: var(--font-display);
  --type-prose-sub-size: var(--text-lg);
  --type-prose-sub-weight: var(--weight-semibold);
  --type-prose-sub-style: normal;
  --type-prose-sub-line: var(--leading-body);
  --type-prose-sub-tracking: var(--tracking-tight);
  --type-prose-sub-transform: none;
  --type-prose-sub-color: var(--color-text-strong);

  --type-meta-label-family: var(--font-body);
  --type-meta-label-size: var(--text-xs);
  --type-meta-label-weight: var(--weight-semibold);
  --type-meta-label-style: normal;
  --type-meta-label-line: var(--leading-body);
  --type-meta-label-tracking: var(--tracking-wide);
  --type-meta-label-transform: uppercase;
  --type-meta-label-color: var(--color-text-dim);

  --type-brand-family: var(--font-display);
  --type-brand-size: clamp(var(--text-base), 1.4vw, var(--text-lg));
  --type-brand-weight: var(--weight-semibold);
  --type-brand-style: normal;
  --type-brand-line: var(--leading-none);
  --type-brand-tracking: var(--tracking-tight);
  --type-brand-transform: none;
  --type-brand-color: var(--color-text-strong);

  --type-nav-family: var(--font-body);
  --type-nav-size: var(--text-sm);
  --type-nav-weight: var(--weight-medium);
  --type-nav-style: normal;
  --type-nav-line: var(--leading-body);
  --type-nav-tracking: var(--tracking-normal);
  --type-nav-transform: none;
  --type-nav-color: var(--color-text-muted);

  --type-drawer-family: var(--font-display);
  --type-drawer-size: var(--display-sm);
  --type-drawer-weight: var(--weight-semibold);
  --type-drawer-style: normal;
  --type-drawer-line: var(--leading-none);
  --type-drawer-tracking: var(--tracking-tighter);
  --type-drawer-transform: none;
  --type-drawer-color: var(--color-text-muted);

  --type-tile-title-family: var(--font-display);
  --type-tile-title-size: var(--text-lg);
  --type-tile-title-weight: var(--weight-semibold);
  --type-tile-title-style: normal;
  --type-tile-title-line: var(--leading-body);
  --type-tile-title-tracking: var(--tracking-tight);
  --type-tile-title-transform: none;
  --type-tile-title-color: var(--color-text-strong);

  --type-tile-subtitle-family: var(--font-body);
  --type-tile-subtitle-size: var(--text-sm);
  --type-tile-subtitle-weight: var(--weight-regular);
  --type-tile-subtitle-style: normal;
  --type-tile-subtitle-line: var(--leading-body);
  --type-tile-subtitle-tracking: var(--tracking-normal);
  --type-tile-subtitle-transform: none;
  --type-tile-subtitle-color: var(--color-text-dim);

  --type-link-family: var(--font-body);
  --type-link-size: var(--text-base);
  --type-link-weight: var(--weight-regular);
  --type-link-style: normal;
  --type-link-line: var(--leading-body);
  --type-link-tracking: var(--tracking-normal);
  --type-link-transform: none;
  --type-link-color: var(--color-text);

  --type-button-family: var(--font-body);
  --type-button-size: var(--text-sm);
  --type-button-weight: var(--weight-semibold);
  --type-button-style: normal;
  --type-button-line: var(--leading-snug);
  --type-button-tracking: var(--tracking-tight);
  --type-button-transform: none;
  --type-button-color: var(--color-text-strong);

  --type-chip-family: var(--font-body);
  --type-chip-size: var(--text-sm);
  --type-chip-weight: var(--weight-medium);
  --type-chip-style: normal;
  --type-chip-line: var(--leading-snug);
  --type-chip-tracking: var(--tracking-normal);
  --type-chip-transform: none;
  --type-chip-color: var(--color-text-muted);

  --type-field-family: var(--font-body);
  --type-field-size: var(--text-base);
  --type-field-weight: var(--weight-regular);
  --type-field-style: normal;
  --type-field-line: var(--leading-body);
  --type-field-tracking: var(--tracking-normal);
  --type-field-transform: none;
  --type-field-color: var(--color-text);

  /* Nav: logo size + clearance are the inputs, height is derived. */
  --nav-logo-size:   clamp(2.25rem, 3.5vw, 2.75rem);
  --nav-clearance:   var(--space-4);
  --nav-height:      calc(var(--nav-logo-size) + (var(--nav-clearance) * 2));
  --nav-bg:          color-mix(in srgb, var(--color-surface) 82%, transparent);
  --nav-blur:        14px;
  --nav-link-gap:    var(--space-8);
  --burger-size:     var(--tap-target-min);
  --burger-line:     2px;
  --burger-width:    22px;

  --drawer-width:    min(26rem, 100vw);   /* full-width on phones, a panel on tablets */

  --tap-target-min:  44px;

  --button-padding-y: var(--space-3);
  --button-padding-x: var(--space-6);
  --button-radius:    var(--radius-full);
  --button-font-size: var(--text-sm);
  --button-weight:    var(--weight-semibold);
  --button-bg:        var(--color-surface-raised);
  --button-text:      var(--color-text-strong);
  --button-bg-hover:  var(--color-surface-alt);
  --button-primary-bg:    var(--color-text-strong);
  --button-primary-text:  var(--color-surface);
  --button-primary-hover: var(--color-secondary-hover);
  --button-danger-bg:     var(--color-danger);
  --button-danger-text:   var(--color-text-strong);
  --button-danger-hover:  var(--color-danger-hover);

  --chip-padding-y:   var(--space-2);
  --chip-padding-x:   var(--space-4);
  --chip-radius:      var(--radius-full);
  --chip-active-bg:   var(--color-text-strong);
  --chip-active-text: var(--color-surface);
  --icon-button-radius: var(--radius-full);

  --link-hover-color:     var(--color-text-strong);
  --link-underline-color: var(--color-border-strong);

  --tile-radius:      var(--radius-md);
  --portrait-radius:  var(--radius-lg);
  --mark-radius:      var(--radius-xs);
  --tile-caption-gap: var(--space-3);
  --tile-inset:       var(--space-4);   /* breathing room inside the tile */

  /* Zoom viewer (unitless — JS reads these) */
  --zoom-max-scale:      6;      /* relative to natural pixel size */
  --zoom-wheel-factor:   1.12;   /* per wheel notch */
  --zoom-step-factor:    1.5;    /* +/− buttons and keys */
  --zoom-dblclick-scale: 2;      /* double-click target, relative to fit */

  --lightbox-panel-width: 24rem;
  --lightbox-max-width:   var(--width-wide);
  --lightbox-radius:      var(--radius-lg);
  --lightbox-media-max:   82dvh;

  --field-height:     var(--tap-target-min);
  --field-padding-x:  var(--space-4);
  --field-radius:     var(--radius-sm);
  --field-border:     var(--border-thin) solid var(--color-border-strong);
  --field-bg:         color-mix(in srgb, var(--color-text) 4%, transparent);

  /* CMS controls share one bounded height; panels and shell use one rhythm. */
  --dash-control-height:     var(--space-12);
  --dash-status-height:      var(--space-8);
  --dash-status-max:         min(var(--width-prose), 32vw);
  --dash-status-max-mobile:  calc(var(--col-min-sm) / 2);
  --dash-shell-padding-block: var(--space-8);
  --dash-panel-padding:      var(--space-5);
  --pick-max-height:         min(22rem, 50dvh);   /* dropdown list before it scrolls */

  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;
  --focus-ring-color:  var(--color-accent-on-dark);

  --mark-size-hero:    clamp(12rem, 30vw, 22rem);
  --maintenance-mark:  clamp(6rem, 18vw, 10rem);   /* mark on the under-construction page */

  --style-preview-width:  min(32rem, 42vw);
  --style-preview-height: 72dvh;
  --style-preview-height-mobile: 52dvh;
  --style-color-swatch:   var(--dash-control-height);
}