/* Sinh tự động từ design/tokens.json bằng scripts/build-tokens.py. Không sửa tay:
   sửa JSON rồi chạy lại script. */
:root{
  /* color */
  --deep: #4000a5;
  --aura: #5c05ce;
  --mid-violet: #864ce0;
  --electric: #b600e2;
  --soft-violet: #9683ec;
  --cream: #ffd98d;
  --yellow: #f9bf30;
  --orange: #f78203;
  --indigo: #3f00dc;
  --indigo-deep: #150a98;
  --night: #100344;
  --white: #ffffff;
  --black: #000000;
  --ground: var(--deep);
  --ink: var(--white);
  --ink-body: rgba(255, 255, 255, 0.88);
  --ink-secondary: rgba(255, 255, 255, 0.8);
  --ink-muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.2);
  --line-strong: rgba(255, 255, 255, 0.35);
  --line-bold: rgba(255, 255, 255, 0.55);
  --fill-soft: rgba(255, 255, 255, 0.04);
  --fill-hover: rgba(255, 255, 255, 0.1);
  --glass: rgba(20, 0, 60, 0.32);
  --glass-field: rgba(20, 0, 60, 0.35);
  --glass-indigo: rgba(63, 0, 220, 0.42);
  --on-accent: var(--deep);
  --on-indigo: var(--white);
  --focus: var(--yellow);
  --state-ok: var(--yellow);
  --state-error: #ff8a8a;
  --kw-human: var(--indigo-deep);
  --kw-social: var(--mid-violet);
  --kw-playful: var(--soft-violet);
  --kw-expressive: var(--cream);
  --kw-emotional: var(--yellow);
  --kw-gaming: var(--orange);
  --deep-rgb: 64 0 165;
  --aura-rgb: 92 5 206;
  --mid-violet-rgb: 134 76 224;
  --electric-rgb: 182 0 226;
  --soft-violet-rgb: 150 131 236;
  --cream-rgb: 255 217 141;
  --yellow-rgb: 249 191 48;
  --orange-rgb: 247 130 3;
  --indigo-rgb: 63 0 220;
  --indigo-deep-rgb: 21 10 152;
  --night-rgb: 16 3 68;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --state-error-rgb: 255 138 138;
  /* spacing */
  --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-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --grid-margin: 72px;
  --grid-margin-wide: 96px;
  --grid-gutter: 24px;
  --grid-gutter-wide: 32px;
  /* radius */
  --radius-0: 0px;
  --radius-sharp: 2px;
  --radius-card: 4px;
  --radius-max: 12px;
  --radius-ui: 16px;
  --radius-icon: 8%;
  --radius-pill: 999px;
  /* shadow */
  --glow-yellow: 0 0 0 5px rgba(249, 191, 48, 0.12), 0 0 20px rgba(249, 191, 48, 0.34);
  --glow-electric: 0 0 48px rgba(182, 0, 226, 0.45);
  --glow-indigo: 0 0 24px rgba(63, 0, 220, 0.6);
  --glow-white: 0 0 12px rgba(255, 255, 255, 0.7);
  --glow-electric-inset: inset 0 0 48px rgba(182, 0, 226, 0.45);
  --shadow-night: 0 12px 32px rgba(16, 3, 68, 0.55);
  /* gradient */
  --g1: linear-gradient(115deg, #f78203 0%, #b600e2 48%, #5c05ce 100%);
  --g2: linear-gradient(135deg, #4000a5 0%, #5c05ce 55%, #9683ec 100%);
  --g3: linear-gradient(90deg, #ffd98d 0%, #f9bf30 40%, #f78203 100%);
  --g4: radial-gradient(circle at 78% 22%, #f78203 0%, #5c05ce 46%, #4000a5 100%);
  --g4-cream: radial-gradient(circle at 78% 22%, #ffd98d 0%, #5c05ce 46%, #4000a5 100%);
  --g-spectrum: linear-gradient(90deg, #f78203 0%, #ffd98d 30%, #9683ec 58%, #5c05ce 80%, #150a98 100%);
  --g-heat-core: linear-gradient(90deg, #f9bf30 0%, #f78203 28%, #5c05ce 75%, #3f00dc 100%);
  --g-ember: linear-gradient(110deg, #f9bf30 0%, #f78203 22%, #b600e2 100%);
  --g-holo: linear-gradient(115deg, #5c05ce 0%, #864ce0 30%, #cfc3f9 45%, #864ce0 60%, #4000a5 100%);
  --g-qr: linear-gradient(180deg, #3f00dc 0%, #3f00dc 55%, #5c05ce 100%);
  --g-glass-indigo: linear-gradient(160deg, rgba(63, 0, 220, 0.6) 0%, rgba(63, 0, 220, 0.22) 100%);
  /* atmosphere */
  --glow-l1: 0.22;
  --glow-l2: 0.6;
  --glow-l3: 0.82;
  --bloom: 64px;
  --grain-l2: 0.06;
  --grain-l3: 0.09;
  --tint-l1: 0.1;
  --tint-l2: 0.3;
  --tint-l3: 0.5;
  --veil-strong: 0.78;
  --veil-soft: 0.4;
  --scrim: 0.55;
  /* signal */
  --signal-width: 8px;
  --signal-height: 24px;
  --signal-pitch: 16px;
  --signal-tile-width: 96px;
  --signal-tile-height: 72px;
  --signal-density-low: 12%;
  --signal-density-medium: 25%;
  --signal-density-high: 42%;
  --signal-low: 0.18;
  --signal-mid: 0.3;
  --signal-high: 0.42;
  --signal-cascade: 72px;
  /* timing */
  --duration-micro: 240ms;
  --duration-transition: 550ms;
  --duration-hero: 1000ms;
  --duration-pulse: 1200ms;
  --duration-drift: 32s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sharp: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.6, 1);
  /* shape */
  --angle-default: 12deg;
  --angle-strong: 24deg;
  --cut-button: 12px;
  --cut-panel: 14%;
  --border-hair: 1px;
  --border-ui: 1.5px;
  --border-frame: 3px;
  --accent-bar-height: 4px;
  --accent-bar-width: 240px;
  --bracket-size: 24px;
  --bracket-stroke: 3px;
  /* size */
  --control-height: 52px;
  --logo-web: 132px;
  --logo-web-sm: 108px;
  --logo-min: 100px;
  --mark-min: 48px;
  --icon-artboard: 64px;
  --icon-safe: 6px;
  --icon-min: 24px;
  --icon-stroke-min: 2px;
  --dot: 7px;
  --container-form: 560px;
  --container-wide: 760px;
  --intro-max: 520px;
  --pass-card-max: 420px;
  --footer-height: 56px;
  --card-min: 192px;
  --intro-max-sm: 440px;
  /* layout */
  --bp-sm: 420px;
  --bp-md: 720px;
  --bp-lg: 980px;
  --bp-xl: 1100px;
  --grid-columns: 12;
  --page-margin: 6.2vw;
  --page-margin-md: 5vw;
  --page-margin-sm: 18px;
  --safe-9x16-bottom: 300px;
  --safe-9x16-right: 140px;
  --z-field: 0;
  --z-field-overlay: 1;
  --z-content: 2;
  --z-grain: 5;
  --z-section: 6;
  --z-chrome: 10;
  /* type */
  --font-display: "Tektur", "Be Vietnam Pro", system-ui, sans-serif;
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --text-hero: 120px;
  --text-numeral: 76px;
  --text-h2: 50px;
  --text-h3: 20px;
  --text-code: 22px;
  --text-stat: 28px;
  --text-ticker: 10px;
  --text-lead: 16px;
  --text-body: 15px;
  --text-intro: 15px;
  --text-intro-en: 12px;
  --text-card-title: 19px;
  --text-note: 14px;
  --text-button: 14px;
  --text-caption: 12px;
  --text-field-label: 12px;
  --text-label: 10px;
  --text-meta: 10px;
  --text-social-hero: 128px;
  --text-social-h1: 80px;
  --text-social-h2: 48px;
  --text-social-body: 32px;
  --text-social-meta: 24px;
}