/* One Platform tokens: generated from the live design system's tokens.json
   (https://claude.ai/artifact/M6RQSrQE3QbRD4xMJay59c, last change 2026-10-02), NOT from the
   stored tokens.css, which lags the source (see its porting.md). Regenerate, never hand-edit,
   except the marked APP block at the end. Loads after style.css (the Last-Wins Rule). */

:root, [data-theme="light"] {
  --brand-050: #f4f8ff;
  --brand-100: #e8f1fe;
  --brand-500: #3b83fb;
  --brand-600: #0d66f9;
  --brand-700: #0a4fc4;
  --brand-text: #0a52cc;
  --aqua-400: #5ffff5;
  --aqua-600: #23c9c2;
  --info-text: #0e7a72;
  --info-dot: #23c9c2;
  --on-brand: #ffffff;
  --on-aqua: #0f1b2d;
  --surface-page: #f1f5fb;
  --surface: #ffffff;
  --surface-sunken: #f7f9fd;
  --surface-overlay: #ffffff;
  --ink: #0f1b2d;
  --ink-muted: #5b6b82;
  --ink-subtle: #5f7089;
  --border: #e4ebf5;
  --border-strong: #7e93b0;
  --focus-ring: #0d66f9;
  --success: #0f7a4a;
  --success-dot: #22c55e;
  --success-surface: #e6f6ee;
  --warning: #b45309;
  --warning-dot: #fc8b1c;
  --warning-surface: #f9f4eb;
  --warning-surface-hover: #f5eedc;
  --danger: #c8231c;
  --danger-dot: #f04438;
  --danger-surface: #fdeceb;
  --danger-solid: #d92d20;
  --on-danger: #ffffff;
  --seasonal: #6d28d9;
  --seasonal-surface: #f2ecfe;
  --success-solid: #15803d;
  --on-success: #ffffff;
  --track: #e8edf5;
  --surface-hover: #eef4fd;
  --cat-1: #85baff;
  --cat-2: #ffa06d;
  --cat-3: #00cebb;
  --cat-4: #c8a8ff;
  --cat-5: #ff97c6;
  --cat-6: #6ece00;
  --pill-success: #27a652;
  --pill-warning: #f2760a;
  --pill-danger: #f2392c;
  --pill-info: #12a399;
  --progress-high: #5fd39b;
  --progress-mid: #f2b552;
  --progress-low: #f04438;
  --brand-yoguruto: #fecc3f;
  --on-brand-yoguruto: #050708;
  --brand-beluga: #3d7e99;
  --on-brand-beluga: #ffffff;
  --brand-nuts: #263678;
  --on-brand-nuts: #ffffff;
  --shadow-card: 0 1px 2px rgba(15,27,45,0.04), 0 4px 16px rgba(15,27,45,0.06);
  --shadow-raised: 0 8px 24px rgba(13,102,249,0.18);
  --shadow-nav: 0 -2px 16px rgba(15,27,45,0.08);
  --shadow-none: none;
}
[data-theme="dark"] {
  --brand-050: #101c30;
  --brand-100: #13233c;
  --brand-500: #4d8dfb;
  --brand-600: #1a6ef7;
  --brand-700: #0a4fc4;
  --brand-text: #7cb0ff;
  --aqua-400: #5ffff5;
  --aqua-600: #2fd8d0;
  --info-text: #2fd8d0;
  --info-dot: #2fd8d0;
  --on-brand: #ffffff;
  --on-aqua: #0f1b2d;
  --surface-page: #0b1220;
  --surface: #121c2b;
  --surface-sunken: #0e1725;
  --surface-overlay: #16202f;
  --ink: #eaf0f8;
  --ink-muted: #9dafc6;
  --ink-subtle: #8093ac;
  --border: #223148;
  --border-strong: #56698a;
  --focus-ring: #4d8dfb;
  --success: #5fd39b;
  --success-dot: #4ade80;
  --success-surface: #0f2a1f;
  --warning: #f2b552;
  --warning-dot: #f2b552;
  --warning-surface: #2b2010;
  --warning-surface-hover: #3f2f17;
  --danger: #ff9089;
  --danger-dot: #ff7a70;
  --danger-surface: #2e1617;
  --danger-solid: #d92d20;
  --on-danger: #ffffff;
  --seasonal: #b79cff;
  --seasonal-surface: #241a3d;
  --success-solid: #15803d;
  --on-success: #ffffff;
  --track: #1b2942;
  --surface-hover: #18253a;
  --cat-1: #154b92;
  --cat-2: #7d3812;
  --cat-3: #0c5650;
  --cat-4: #5b1dc8;
  --cat-5: #93154e;
  --cat-6: #33550c;
  --pill-success: #5fd39b;
  --pill-warning: #f2b552;
  --pill-danger: #ff9089;
  --pill-info: #2fd8d0;
  --progress-high: #5fd39b;
  --progress-mid: #f2b552;
  --progress-low: #f04438;
  --brand-yoguruto: #fecc3f;
  --on-brand-yoguruto: #050708;
  --brand-beluga: #3d7e99;
  --on-brand-beluga: #ffffff;
  --brand-nuts: #263678;
  --on-brand-nuts: #ffffff;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.32);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.50);
  --shadow-nav: 0 -2px 16px rgba(0,0,0,0.45);
  --shadow-none: none;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 24px;
  --size-tap: 44px;
  --size-control: 52px;
  --size-control-sm: 40px;
  --size-tile: 56px;
  --size-stepper: 28px;
  --size-icon-xl: 28px;
  --size-control-lg: 48px;
  --size-row: 64px;
  --size-row-lg: 76px;
  --size-thumb: 44px;
  --size-kpi-icon: 48px;
  --size-sidenav: 248px;
  --size-sidenav-collapsed: 76px;
  --size-topbar: 72px;
  --size-drawer: 400px;
  --size-page-max: 1600px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --font-sans: "Prompt", system-ui, -apple-system, sans-serif;
  --font-thai: "Prompt", system-ui, sans-serif;
  --font-numeric: "Prompt", system-ui, sans-serif;
  --text-display-lg: 700 28px/34px var(--font-sans);
  --text-display: 700 22px/28px var(--font-sans);
  --text-title-lg: 700 20px/28px var(--font-sans);
  --text-title: 600 17px/24px var(--font-sans);
  --text-title-sm: 600 15px/20px var(--font-sans);
  --text-body: 400 15px/22px var(--font-sans);
  --text-body-strong: 600 15px/22px var(--font-sans);
  --text-body-sm: 400 13px/18px var(--font-sans);
  --text-body-sm-strong: 600 13px/18px var(--font-sans);
  --text-caption: 500 11px/16px var(--font-sans);
  --text-stat: 700 20px/24px var(--font-numeric);
  --text-stat-sm: 700 15px/20px var(--font-numeric);
  --text-button: 600 16px/24px var(--font-sans);
  --text-button-sm: 600 14px/20px var(--font-sans);
  --text-label: 600 13px/18px var(--font-sans);
  --text-tab: 500 11px/14px var(--font-sans);
  --text-d-display: 700 34px/42px var(--font-sans);
  --text-d-title-lg: 700 26px/34px var(--font-sans);
  --text-d-title: 600 20px/28px var(--font-sans);
  --text-d-title-sm: 600 17px/24px var(--font-sans);
  --text-d-body: 400 17px/26px var(--font-sans);
  --text-d-body-strong: 600 17px/26px var(--font-sans);
  --text-d-body-sm: 400 15px/22px var(--font-sans);
  --text-d-caption: 500 13px/18px var(--font-sans);
  --text-d-stat: 700 32px/38px var(--font-sans);
  --text-d-button: 600 16px/24px var(--font-sans);
  --text-d-label: 600 15px/20px var(--font-sans);
  --text-d-table: 400 16px/24px var(--font-sans);
  --text-d-table-head: 600 13px/18px var(--font-sans);
  --text-d-nav: 500 15px/22px var(--font-sans);
}

/* ---- APP block (hand-written) ------------------------------------------------------------
   info-surface: the source gives info-text / info-dot / pill-info but no wash; this is YOKU ONE's
   Aqua Wash (DESIGN.md, Semantic states), the ground in-progress badges sit on. DERIVED. */
:root, [data-theme="light"] { --info-surface: #e3fbfa; }
[data-theme="dark"] { --info-surface: #10302e; }
/* Form controls inherit no font in any browser (porting.md, section 4). */
button, input, select, textarea, optgroup { font-family: inherit; }