/* Canonical Naka foundation. Sync Studio with creative/sync-brand-tokens.cjs. */
:root {
  --naka-ground: #dfeaf7;
  --naka-canvas: #f4f7fc;
  --naka-surface: #ffffff;
  --naka-surface-soft: #edf3fb;
  --naka-surface-hover: #e3ecf8;
  --naka-line: #d2deed;
  --naka-line-strong: #b6c7de;
  --naka-ink: #14233b;
  --naka-ink-secondary: #4b5b74;
  --naka-ink-muted: #506079;
  --naka-brand: #1d50be;
  --naka-brand-text: #1a46a6;
  --naka-brand-soft: #e6efff;
  --naka-on-brand: #ffffff;
  --naka-focus: #2d66d6;
  --naka-focus-halo: rgba(29, 80, 190, .2);
  --naka-action: #f97316;
  --naka-action-hover: #fb8a3c;
  --naka-action-press: #f38926;
  --naka-on-action: #14233b;
  --naka-glass: rgba(255, 255, 255, .84);
  --naka-glass-dense: rgba(255, 255, 255, .96);
  --naka-shadow-card: 0 1px 2px rgba(20, 35, 59, .03), 0 8px 24px rgba(20, 35, 59, .04);
  --naka-shadow-nav: 0 2px 8px rgba(20, 35, 59, .03), 0 12px 32px rgba(20, 35, 59, .06);
  --naka-shadow-raised: 0 4px 12px rgba(20, 35, 59, .05), 0 20px 48px rgba(20, 35, 59, .1);
  --naka-font-body: "IBM Plex Sans Thai", system-ui, sans-serif;
  --naka-font-display: "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif;
  --naka-radius-control: 12px;
  --naka-radius-panel: 20px;
  --naka-radius-feature: 28px;
  --naka-control-height: 44px;
  --naka-font-ui: 14px;
  --naka-font-label: 13px;
}
:root[data-theme="dark"] {
  --naka-canvas: #101b2d;
  --naka-surface: #18273d;
  --naka-surface-soft: #1d304a;
  --naka-surface-hover: #263d5a;
  --naka-line: #2d4361;
  --naka-line-strong: #456184;
  --naka-ink: #f3f7fd;
  --naka-ink-secondary: #c3cfdf;
  --naka-ink-muted: #a2b4cd;
  --naka-brand: #83b4ff;
  --naka-brand-text: #a5c9ff;
  --naka-brand-soft: #213c61;
  --naka-on-brand: #14233b;
  --naka-focus: #83b4ff;
  --naka-focus-halo: rgba(131, 180, 255, .24);
  --naka-glass: rgba(24, 39, 61, .84);
  --naka-glass-dense: rgba(24, 39, 61, .96);
  --naka-shadow-card: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .12);
  --naka-shadow-nav: 0 2px 8px rgba(0, 0, 0, .12), 0 12px 32px rgba(0, 0, 0, .2);
  --naka-shadow-raised: 0 4px 12px rgba(0, 0, 0, .16), 0 20px 48px rgba(0, 0, 0, .26);
}