/* Neue Haas Grotesk Display Pro — self-hosted studio sans (woff2 in assets/fonts).
 * Paths are relative to this file (assets/css/). Added 2026-06-05. */
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Neue_Haas_Grotesk_Collection/Neue Haas Grotesk Display Family/NeueHaasGrotDisp-45Light.woff2") format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Neue_Haas_Grotesk_Collection/Neue Haas Grotesk Display Family/NeueHaasGrotDisp-55Roman.woff2") format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Neue_Haas_Grotesk_Collection/Neue Haas Grotesk Display Family/NeueHaasGrotDisp-56Italic.woff2") format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Neue_Haas_Grotesk_Collection/Neue Haas Grotesk Display Family/NeueHaasGrotDisp-65Medium.woff2") format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Neue_Haas_Grotesk_Collection/Neue Haas Grotesk Display Family/NeueHaasGrotDisp-75Bold.woff2") format("woff2"); }

/* ---------------------------------------------------------------------------
 * tokens.css
 *
 * Generated from _config/design-system/token-map.md
 * Mirrors brand.shokunincrafthouse.com (--sc-* naming).
 *
 * Two layers:
 *   --sc-p-*   primitives  (raw values)
 *   --sc-*     semantics   (consumed by components)
 *
 * Light mode = :root. Dark mode = [data-theme="dark"] (semantic overrides only).
 *
 * Do not introduce raw values in components. Add new tokens here first.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* ===== 1. Primitive color ramps ===== */

  /* Warm gray */
  --sc-p-color-warm-gray-50:  #F1EFEB;
  --sc-p-color-warm-gray-100: #E3DFD8;
  --sc-p-color-warm-gray-200: #D9D5CE;
  --sc-p-color-warm-gray-250: #D5D1CA;
  --sc-p-color-warm-gray-300: #CDC9C2;
  --sc-p-color-warm-gray-350: #C5C0B8;
  --sc-p-color-warm-gray-400: #9A9388;
  --sc-p-color-warm-gray-500: #5F5C55;
  --sc-p-color-warm-gray-600: #484640;
  --sc-p-color-warm-gray-700: #312F2A;
  --sc-p-color-warm-gray-800: #1A1815;
  --sc-p-color-warm-gray-900: #0D0C0B;

  /* Shu (brand red) */
  --sc-p-color-shu-50:  #FCEFEC;
  --sc-p-color-shu-100: #F7D9D4;
  --sc-p-color-shu-200: #F0B5AC;
  --sc-p-color-shu-300: #E68B7F;
  --sc-p-color-shu-400: #DA5C4D;
  --sc-p-color-shu-500: #C8281C;
  --sc-p-color-shu-600: #B22318;
  --sc-p-color-shu-700: #9E1F15;
  --sc-p-color-shu-800: #771A11;
  --sc-p-color-shu-900: #4F100B;

  /* Status (light / dark pairs) */
  --sc-p-color-status-success-light: #4F5C2A;
  --sc-p-color-status-success-dark:  #A8BE6E;
  --sc-p-color-status-warning-light: #8A5E10;
  --sc-p-color-status-warning-dark:  #D9B265;
  --sc-p-color-status-info-light:    #3B5C7A;
  --sc-p-color-status-info-dark:     #8FB1D0;

  /* Dark surfaces */
  --sc-p-color-dark-surface-page:      #0D0C0B;
  --sc-p-color-dark-surface-sunk:      #181512;
  --sc-p-color-dark-surface-deep-sunk: #221F1B;
  --sc-p-color-dark-border:            #201E1A;
  --sc-p-color-dark-border-subtle:     #2F2B26;
  --sc-p-color-dark-text-primary:      #E2DDD6;
  --sc-p-color-dark-text-disabled:     #6B655C;

  /* Utility */
  --sc-p-color-utility-white: #FFFFFF;
  --sc-p-color-utility-black: #000000;

  /* ===== 2. Primitive typography ===== */

  /* Families */
  --sc-p-font-family-sans: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Text Pro", "Helvetica Neue", system-ui, sans-serif;
  --sc-p-font-family-mono: "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, monospace;

  /* Editorial families — local addition 2026-06-03 (Digital case-study register).
   * Not yet on brand.shokunincrafthouse.com; local until the brand system catches up
   * (same status as shadow + breakpoint tokens). See decisions/decisions.md. */
  --sc-p-font-family-serif-display: "DM Serif Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sc-p-font-family-sans-reading:  "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --sc-p-font-family-condensed:     "Kanit", "Arial Narrow", system-ui, sans-serif;
  --sc-p-font-family-serif-text:    "DM Serif Text", "Hoefler Text", Georgia, "Times New Roman", serif;

  /* Sizes */
  --sc-p-font-size-11:  11px;
  --sc-p-font-size-12:  12px;
  --sc-p-font-size-13:  13px;
  --sc-p-font-size-14:  14px;
  --sc-p-font-size-16:  16px;
  --sc-p-font-size-20:  20px;
  --sc-p-font-size-24:  24px;
  --sc-p-font-size-32:  32px;
  --sc-p-font-size-44:  44px;
  --sc-p-font-size-60:  60px;
  --sc-p-font-size-84:  84px;
  --sc-p-font-size-120: 120px;

  /* Weights */
  --sc-p-font-weight-light:    300;
  --sc-p-font-weight-regular:  400;
  --sc-p-font-weight-medium:   500;
  --sc-p-font-weight-semibold: 600;

  /* Line heights */
  --sc-p-font-line-height-flat:    1;
  --sc-p-font-line-height-tight:   1.1;
  --sc-p-font-line-height-snug:    1.2;
  --sc-p-font-line-height-base:    1.5;
  --sc-p-font-line-height-relaxed: 1.55;

  /* Tracking */
  --sc-p-font-tracking-tightest: -0.04em;
  --sc-p-font-tracking-tighter:  -0.025em;
  --sc-p-font-tracking-tight:    -0.018em;
  --sc-p-font-tracking-snug:     -0.012em;
  --sc-p-font-tracking-normal:   0em;
  --sc-p-font-tracking-wide:     0.04em;
  --sc-p-font-tracking-wider:    0.06em;
  --sc-p-font-tracking-widest:   0.08em;
  --sc-p-font-tracking-caps:     0.1em;

  /* ===== 3. Primitive spacing ===== */

  --sc-p-space-4:   4px;
  --sc-p-space-8:   8px;
  --sc-p-space-12:  12px;
  --sc-p-space-16:  16px;
  --sc-p-space-24:  24px;
  --sc-p-space-32:  32px;
  --sc-p-space-48:  48px;
  --sc-p-space-64:  64px;
  --sc-p-space-80:  80px;
  --sc-p-space-96:  96px;
  --sc-p-space-120: 120px;

  /* Micro */
  --sc-p-space-micro-2:  2px;
  --sc-p-space-micro-6:  6px;
  --sc-p-space-micro-10: 10px;
  --sc-p-space-micro-14: 14px;
  --sc-p-space-micro-18: 18px;
  --sc-p-space-micro-22: 22px;

  /* ===== 4. Primitive radius ===== */

  --sc-p-radius-none:    0px;
  --sc-p-radius-input:   3px;
  --sc-p-radius-default: 8px;
  --sc-p-radius-circle:  9999px;

  /* ===== 5. Primitive border width ===== */

  --sc-p-border-width-hairline: 1px;
  --sc-p-border-width-focus:    2px;
  --sc-p-border-width-accent:   3px;

  /* ===== 6. Primitive motion ===== */

  /* Durations */
  --sc-p-motion-duration-micro:        200ms;
  --sc-p-motion-duration-press:        160ms;
  --sc-p-motion-duration-standard:     380ms;
  --sc-p-motion-duration-orchestrated: 720ms;

  /* Easings */
  --sc-p-motion-easing-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --sc-p-motion-easing-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-p-motion-easing-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --sc-p-motion-easing-cinematic:  cubic-bezier(0.32, 0.08, 0.12, 1);

  /* Press scale */
  --sc-p-motion-scale-press-button: 0.985;
  --sc-p-motion-scale-press-tap:    0.92;

  /* ============================================================
   * SEMANTIC TOKENS — LIGHT MODE
   * Dark mode overrides only the color tokens below
   * (typography, spacing, radius, motion are mode-invariant).
   * ============================================================ */

  /* ===== Semantic color: surface ===== */
  --sc-color-surface-page:      var(--sc-p-color-warm-gray-100);
  --sc-color-surface-sunk:      var(--sc-p-color-warm-gray-200);
  --sc-color-surface-deep-sunk: var(--sc-p-color-warm-gray-300);
  --sc-color-surface-inverse:   var(--sc-p-color-warm-gray-800);

  /* ===== Semantic color: text ===== */
  --sc-color-text-primary:    var(--sc-p-color-warm-gray-800);
  --sc-color-text-secondary:  var(--sc-p-color-warm-gray-500);
  --sc-color-text-disabled:   var(--sc-p-color-warm-gray-400);
  --sc-color-text-on-accent:  var(--sc-p-color-utility-white);
  --sc-color-text-on-inverse: var(--sc-p-color-warm-gray-50);

  /* ===== Semantic color: border ===== */
  --sc-color-border-default: var(--sc-p-color-warm-gray-250);
  --sc-color-border-subtle:  var(--sc-p-color-warm-gray-350);
  --sc-color-border-strong:  var(--sc-p-color-warm-gray-800);
  --sc-color-border-focus:   var(--sc-p-color-shu-500);

  /* ===== Semantic color: interactive ===== */
  --sc-color-interactive-default: var(--sc-p-color-warm-gray-800);
  --sc-color-interactive-hover:   var(--sc-p-color-shu-500);
  --sc-color-interactive-active:  var(--sc-p-color-shu-700);

  /* ===== Semantic color: status ===== */
  --sc-color-status-success: var(--sc-p-color-status-success-light);
  --sc-color-status-warning: var(--sc-p-color-status-warning-light);
  --sc-color-status-error:   var(--sc-p-color-shu-500);
  --sc-color-status-info:    var(--sc-p-color-status-info-light);

  /* ===== Semantic color: brand ===== */
  --sc-color-brand-accent:      var(--sc-p-color-shu-500);
  --sc-color-brand-accent-deep: var(--sc-p-color-shu-700);

  /* ===== Semantic typography: text styles =====
   * Each style binds family + size + weight + line-height + letter-spacing.
   * Suffixed tokens exist for each axis; consume the role, not the primitive. */

  --sc-font-text-label-chrome-family:         var(--sc-p-font-family-sans);
  --sc-font-text-label-chrome-size:           var(--sc-p-font-size-11);
  --sc-font-text-label-chrome-weight:         var(--sc-p-font-weight-medium);
  --sc-font-text-label-chrome-line-height:    var(--sc-p-font-line-height-base);
  --sc-font-text-label-chrome-letter-spacing: var(--sc-p-font-tracking-widest);

  --sc-font-text-label-ui-family:         var(--sc-p-font-family-sans);
  --sc-font-text-label-ui-size:           var(--sc-p-font-size-12);
  --sc-font-text-label-ui-weight:         var(--sc-p-font-weight-medium);
  --sc-font-text-label-ui-line-height:    var(--sc-p-font-line-height-base);
  --sc-font-text-label-ui-letter-spacing: var(--sc-p-font-tracking-wide);

  --sc-font-text-caption-family:         var(--sc-p-font-family-sans);
  --sc-font-text-caption-size:           var(--sc-p-font-size-13);
  --sc-font-text-caption-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-caption-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-caption-letter-spacing: var(--sc-p-font-tracking-normal);

  --sc-font-text-body-dense-family:         var(--sc-p-font-family-sans);
  --sc-font-text-body-dense-size:           var(--sc-p-font-size-14);
  --sc-font-text-body-dense-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-body-dense-line-height:    var(--sc-p-font-line-height-base);
  --sc-font-text-body-dense-letter-spacing: var(--sc-p-font-tracking-normal);

  --sc-font-text-body-default-family:         var(--sc-p-font-family-sans);
  --sc-font-text-body-default-size:           var(--sc-p-font-size-16);
  --sc-font-text-body-default-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-body-default-line-height:    var(--sc-p-font-line-height-base);
  --sc-font-text-body-default-letter-spacing: var(--sc-p-font-tracking-normal);

  --sc-font-text-body-lead-family:         var(--sc-p-font-family-sans);
  --sc-font-text-body-lead-size:           var(--sc-p-font-size-20);
  --sc-font-text-body-lead-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-body-lead-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-body-lead-letter-spacing: var(--sc-p-font-tracking-normal);

  --sc-font-text-title-card-family:         var(--sc-p-font-family-sans);
  --sc-font-text-title-card-size:           var(--sc-p-font-size-24);
  --sc-font-text-title-card-weight:         var(--sc-p-font-weight-medium);
  --sc-font-text-title-card-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-title-card-letter-spacing: var(--sc-p-font-tracking-snug);

  --sc-font-text-title-section-family:         var(--sc-p-font-family-sans);
  --sc-font-text-title-section-size:           var(--sc-p-font-size-32);
  --sc-font-text-title-section-weight:         var(--sc-p-font-weight-medium);
  --sc-font-text-title-section-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-title-section-letter-spacing: var(--sc-p-font-tracking-tight);

  --sc-font-text-display-sm-family:         var(--sc-p-font-family-sans);
  --sc-font-text-display-sm-size:           var(--sc-p-font-size-44);
  --sc-font-text-display-sm-weight:         var(--sc-p-font-weight-light);
  --sc-font-text-display-sm-line-height:    var(--sc-p-font-line-height-tight);
  --sc-font-text-display-sm-letter-spacing: var(--sc-p-font-tracking-tighter);

  --sc-font-text-display-md-family:         var(--sc-p-font-family-sans);
  --sc-font-text-display-md-size:           var(--sc-p-font-size-60);
  --sc-font-text-display-md-weight:         var(--sc-p-font-weight-light);
  --sc-font-text-display-md-line-height:    var(--sc-p-font-line-height-tight);
  --sc-font-text-display-md-letter-spacing: var(--sc-p-font-tracking-tighter);

  --sc-font-text-display-lg-family:         var(--sc-p-font-family-sans);
  --sc-font-text-display-lg-size:           var(--sc-p-font-size-84);
  --sc-font-text-display-lg-weight:         var(--sc-p-font-weight-light);
  --sc-font-text-display-lg-line-height:    var(--sc-p-font-line-height-tight);
  --sc-font-text-display-lg-letter-spacing: var(--sc-p-font-tracking-tightest);

  --sc-font-text-display-xl-family:         var(--sc-p-font-family-sans);
  --sc-font-text-display-xl-size:           var(--sc-p-font-size-120);
  --sc-font-text-display-xl-weight:         var(--sc-p-font-weight-light);
  --sc-font-text-display-xl-line-height:    var(--sc-p-font-line-height-flat);
  --sc-font-text-display-xl-letter-spacing: var(--sc-p-font-tracking-tightest);

  --sc-font-text-mono-chrome-family:         var(--sc-p-font-family-mono);
  --sc-font-text-mono-chrome-size:           var(--sc-p-font-size-11);
  --sc-font-text-mono-chrome-weight:         var(--sc-p-font-weight-medium);
  --sc-font-text-mono-chrome-line-height:    var(--sc-p-font-line-height-base);
  --sc-font-text-mono-chrome-letter-spacing: var(--sc-p-font-tracking-wider);

  --sc-font-text-mono-caption-family:         var(--sc-p-font-family-mono);
  --sc-font-text-mono-caption-size:           var(--sc-p-font-size-13);
  --sc-font-text-mono-caption-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-mono-caption-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-mono-caption-letter-spacing: var(--sc-p-font-tracking-normal);

  --sc-font-text-mono-body-family:         var(--sc-p-font-family-mono);
  --sc-font-text-mono-body-size:           var(--sc-p-font-size-16);
  --sc-font-text-mono-body-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-mono-body-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-mono-body-letter-spacing: var(--sc-p-font-tracking-normal);

  /* ===== Semantic typography: editorial register =====
   * Digital case-study pages only. Serif display (DM Serif Display, single weight,
   * heft is intrinsic) + DM Sans reading body. Sizes bind to existing primitives
   * (nearest-token mapping, no new size values). Local addition 2026-06-03. */
  --sc-font-text-editorial-hero-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-hero-size:           var(--sc-p-font-size-60);
  --sc-font-text-editorial-hero-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-hero-line-height:    var(--sc-p-font-line-height-tight);
  --sc-font-text-editorial-hero-letter-spacing: var(--sc-p-font-tracking-tight);

  --sc-font-text-editorial-section-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-section-size:           var(--sc-p-font-size-32);
  --sc-font-text-editorial-section-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-section-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-section-letter-spacing: var(--sc-p-font-tracking-snug);

  --sc-font-text-editorial-title-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-title-size:           var(--sc-p-font-size-24);
  --sc-font-text-editorial-title-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-title-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-title-letter-spacing: var(--sc-p-font-tracking-snug);

  --sc-font-text-reading-body-family:         var(--sc-p-font-family-sans-reading);
  --sc-font-text-reading-body-size:           var(--sc-p-font-size-16);
  --sc-font-text-reading-body-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-reading-body-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-reading-body-letter-spacing: var(--sc-p-font-tracking-normal);

  /* Editorial pull-quote — DM Serif Text (italic set in component CSS). Local addition 2026-06-05. */
  --sc-font-text-editorial-quote-family:         var(--sc-p-font-family-serif-text);
  --sc-font-text-editorial-quote-size:           var(--sc-p-font-size-24);
  --sc-font-text-editorial-quote-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-quote-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-quote-letter-spacing: var(--sc-p-font-tracking-tight);

  --sc-font-text-reading-lead-family:         var(--sc-p-font-family-sans-reading);
  --sc-font-text-reading-lead-size:           var(--sc-p-font-size-20);
  --sc-font-text-reading-lead-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-reading-lead-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-reading-lead-letter-spacing: var(--sc-p-font-tracking-normal);

  /* ===== Semantic spacing: component ===== */
  --sc-space-component-padding-sm: var(--sc-p-space-8);
  --sc-space-component-padding-md: var(--sc-p-space-16);
  --sc-space-component-padding-lg: var(--sc-p-space-24);

  --sc-space-component-padding-inline-sm: var(--sc-p-space-micro-6);
  --sc-space-component-padding-inline-md: var(--sc-p-space-12);
  --sc-space-component-padding-inline-lg: var(--sc-p-space-16);

  --sc-space-component-padding-block-sm: var(--sc-p-space-micro-2);
  --sc-space-component-padding-block-md: var(--sc-p-space-8);
  --sc-space-component-padding-block-lg: var(--sc-p-space-12);

  --sc-space-component-gap-sm: var(--sc-p-space-4);
  --sc-space-component-gap-md: var(--sc-p-space-8);
  --sc-space-component-gap-lg: var(--sc-p-space-12);

  /* ===== Semantic spacing: layout ===== */
  --sc-space-layout-stack-sm: var(--sc-p-space-16);
  --sc-space-layout-stack-md: var(--sc-p-space-24);
  --sc-space-layout-stack-lg: var(--sc-p-space-48);
  --sc-space-layout-stack-xl: var(--sc-p-space-80);

  --sc-space-layout-inset-sm: var(--sc-p-space-16);
  --sc-space-layout-inset-md: var(--sc-p-space-24);
  --sc-space-layout-inset-lg: var(--sc-p-space-48);

  /* ===== Semantic sizing ===== */
  --sc-size-avatar-xs: var(--sc-p-space-24);
  --sc-size-avatar-sm: var(--sc-p-space-32);
  --sc-size-avatar-md: var(--sc-p-space-48);
  --sc-size-avatar-lg: var(--sc-p-space-64);

  --sc-size-switch-track-width:  var(--sc-p-space-32);
  --sc-size-switch-track-height: var(--sc-p-space-micro-18);
  --sc-size-switch-thumb:        var(--sc-p-space-micro-14);

  --sc-size-progress-bar-height:       var(--sc-p-space-4);
  --sc-size-progress-circular:         var(--sc-p-space-48);
  --sc-size-progress-circular-stroke:  var(--sc-p-space-4);

  /* ===== Semantic radius ===== */
  --sc-radius-none:    var(--sc-p-radius-none);
  --sc-radius-control: var(--sc-p-radius-input);
  --sc-radius-surface: var(--sc-p-radius-default);
  --sc-radius-pill:    var(--sc-p-radius-circle);

  /* ===== Semantic border width ===== */
  --sc-border-width-default: var(--sc-p-border-width-hairline);
  --sc-border-width-focus:   var(--sc-p-border-width-focus);
  --sc-border-width-accent:  var(--sc-p-border-width-accent);
  --sc-border-focus-offset:  var(--sc-p-space-micro-2);

  /* ===== Semantic motion ===== */
  --sc-motion-hover-duration: var(--sc-p-motion-duration-micro);
  --sc-motion-hover-easing:   var(--sc-p-motion-easing-out);

  --sc-motion-press-duration: var(--sc-p-motion-duration-press);
  --sc-motion-press-easing:   var(--sc-p-motion-easing-out-strong);
  --sc-motion-press-scale:    var(--sc-p-motion-scale-press-button);

  --sc-motion-mode-duration: var(--sc-p-motion-duration-standard);
  --sc-motion-mode-easing:   var(--sc-p-motion-easing-in-out);

  --sc-motion-reveal-duration: var(--sc-p-motion-duration-micro);
  --sc-motion-reveal-easing:   var(--sc-p-motion-easing-out);

  /* ===== Shadow (pending) =====
   * Values not yet defined in the brand system.
   * Slots reserved; do not consume until populated.
   *
   * --sc-shadow-sm: pending — not yet in brand system;
   * --sc-shadow-md: pending — not yet in brand system;
   * --sc-shadow-lg: pending — not yet in brand system;
   */

  /* ===== Breakpoints (pending) =====
   * Agreed values: 390 / 768 / 1024 / 1440 / 1920.
   * Not defined as CSS custom properties on the brand system yet —
   * use as build-time constants in JS / preprocessor until exported.
   *
   * --sc-bp-sm:  390px;   pending — not defined as CSS custom properties
   * --sc-bp-md:  768px;   pending — not defined as CSS custom properties
   * --sc-bp-lg:  1024px;  pending — not defined as CSS custom properties
   * --sc-bp-xl:  1440px;  pending — not defined as CSS custom properties
   * --sc-bp-2xl: 1920px;  pending — not defined as CSS custom properties
   */

  /* ===== Sprint 4 illustration aliases =====
   * Coffee-table woodworking-viewer (Three.js) reads these token names via
   * getComputedStyle. Each alias points at the closest --sc-* equivalent so
   * the viewer keeps rendering against the brand palette. Visual fidelity of
   * the wood/rattan/LED scene drops vs. the original gold-wood palette —
   * acceptable per design decision (brand palette has no warm wood tones).
   *
   * Do not consume these tokens from new code. Use --sc-* directly. */
  --focus-ring:        var(--sc-color-border-focus);
  --wood-top:          var(--sc-p-color-warm-gray-100);
  --wood-side-left:    var(--sc-p-color-warm-gray-250);
  --wood-side-right:   var(--sc-p-color-warm-gray-200);
  --wood-leg:          var(--sc-p-color-warm-gray-250);
  --wood-leg-edge:     var(--sc-p-color-warm-gray-200);
  --wood-cord:         var(--sc-p-color-warm-gray-700);
  --wood-cedar-burnt:  var(--sc-p-color-warm-gray-800);
  --led-warm-3000k:    var(--sc-p-color-warm-gray-50);
  --rattan-tan:        var(--sc-p-color-warm-gray-100);
  --rattan-hole:       color-mix(in srgb, var(--sc-p-color-utility-black) 55%, transparent);
  --scene-key-tint:    var(--sc-p-color-warm-gray-50);
}

/* ============================================================
 * DARK MODE
 * Overrides semantic color tokens only.
 * Primitives, typography, spacing, sizing, radius, border, motion
 * are mode-invariant and inherit from :root.
 * ============================================================ */

[data-theme="dark"] {
  /* Surface */
  --sc-color-surface-page:      var(--sc-p-color-dark-surface-page);
  --sc-color-surface-sunk:      var(--sc-p-color-dark-surface-sunk);
  --sc-color-surface-deep-sunk: var(--sc-p-color-dark-surface-deep-sunk);
  --sc-color-surface-inverse:   var(--sc-p-color-warm-gray-50);

  /* Text */
  --sc-color-text-primary:    var(--sc-p-color-dark-text-primary);
  --sc-color-text-secondary:  var(--sc-p-color-warm-gray-400);
  --sc-color-text-disabled:   var(--sc-p-color-dark-text-disabled);
  --sc-color-text-on-accent:  var(--sc-p-color-utility-white);
  --sc-color-text-on-inverse: var(--sc-p-color-warm-gray-800);

  /* Border */
  --sc-color-border-default: var(--sc-p-color-dark-border);
  --sc-color-border-subtle:  var(--sc-p-color-dark-border-subtle);
  --sc-color-border-strong:  var(--sc-p-color-warm-gray-50);
  --sc-color-border-focus:   var(--sc-p-color-shu-400);

  /* Interactive */
  --sc-color-interactive-default: var(--sc-p-color-warm-gray-50);
  --sc-color-interactive-hover:   var(--sc-p-color-shu-400);
  --sc-color-interactive-active:  var(--sc-p-color-shu-500);

  /* Status */
  --sc-color-status-success: var(--sc-p-color-status-success-dark);
  --sc-color-status-warning: var(--sc-p-color-status-warning-dark);
  --sc-color-status-error:   var(--sc-p-color-shu-400);
  --sc-color-status-info:    var(--sc-p-color-status-info-dark);

  /* Brand (accent ramps are mode-invariant by design) */
  --sc-color-brand-accent:      var(--sc-p-color-shu-500);
  --sc-color-brand-accent-deep: var(--sc-p-color-shu-700);
}