/* ============================================================
   UpPass Design Tokens — generated from uppass-design-tokens.tokens.json
   ============================================================ */

:root {

  /* ── Source palette ─────────────────────────────────────── */

  /* Blue */
  --color-blue-100: #9daef3;
  --color-blue-300: #7089ee;
  --color-blue-500: #4364e8;
  --color-blue-700: #3d59c2;
  --color-blue-900: #374e9c;

  /* Blue / alpha */
  --color-blue-500-80: #4364e8cc;
  --color-blue-500-60: #4364e899;
  --color-blue-500-40: #4364e866;
  --color-blue-500-20: #4364e833;
  --color-blue-500-10: #4364e81a;
  --color-blue-500-5:  #4364e80d;
  --color-blue-500-10-on-white: #edf0fd;
  --color-blue-500-20-on-white: #d9e0fa;

  /* Teal */
  --color-teal-100: #87e6d6;
  --color-teal-300: #50dac3;
  --color-teal-500: #19ceb0;
  --color-teal-700: #1daa97;
  --color-teal-900: #21867f;

  /* Teal / alpha */
  --color-teal-500-80: #19ceb0cc;
  --color-teal-500-60: #19ceb099;
  --color-teal-500-40: #19ceb066;
  --color-teal-500-20: #19ceb033;
  --color-teal-500-10: #19ceb01a;
  --color-teal-500-5:  #19ceb00d;

  /* Gray */
  --color-gray-100: #eeeef0;
  --color-gray-300: #d4d6db;
  --color-gray-500: #aaacb6;
  --color-gray-700: #777b8b;
  --color-gray-800: #50566a;
  --color-gray-900: #2a3049;

  /* Gray / alpha */
  --color-gray-900-80: #2a3049cc;
  --color-gray-900-60: #2a304999;
  --color-gray-900-40: #2a304966;
  --color-gray-900-20: #2a304933;
  --color-gray-900-10: #2a30491a;
  --color-gray-900-5:  #2a30490d;
  --color-gray-900-5-on-white: #f4f4f6;

  /* Pink */
  --color-pink-100: #fdeaf1;
  --color-pink-300: #f5a8c4;
  --color-pink-500: #ed6898;
  --color-pink-700: #c44573;
  --color-pink-900: #74203f;

  /* Pink / alpha */
  --color-pink-500-80: #ed6898cc;
  --color-pink-500-60: #ed689899;
  --color-pink-500-40: #ed689866;
  --color-pink-500-20: #ed689833;
  --color-pink-500-10: #ed68981a;
  --color-pink-500-5:  #ed68980d;
  --color-pink-500-80-on-white: #f186ad;
  --color-pink-500-60-on-white: #f4a4c1;
  --color-pink-500-20-on-white: #fbe1ea;

  /* Red */
  --color-red-100: #fee2e2;
  --color-red-300: #fca5a5;
  --color-red-500: #ef4444;
  --color-red-700: #b91c1c;
  --color-red-900: #7f1d1d;
  --color-red-500-20-on-white: #fcdada;

  /* Yellow */
  --color-yellow-100: #fff8db;
  --color-yellow-300: #f5c842;
  --color-yellow-500: #ffe27c;
  --color-yellow-700: #c79c1f;
  --color-yellow-900: #7a5c0a;

  /* Orange */
  --color-orange-100: #fff2e8;
  --color-orange-300: #ffb066;
  --color-orange-500: #ff851a;
  --color-orange-700: #cc6614;
  --color-orange-900: #7a3d08;

  /* Violet */
  --color-violet-100: #a59af1;
  --color-violet-300: #7d6ceb;
  --color-violet-500: #5c47e6;
  --color-violet-700: #4a39b8;
  --color-violet-900: #2e2473;

  /* Violet / alpha */
  --color-violet-500-05-on-white: #fcfbff;
  --color-violet-500-10-on-white: #efedfd;
  --color-violet-500-20-on-white: #dedafa;

  /* Indigo */
  --color-indigo-100: #95a8f5;
  --color-indigo-300: #6580f0;
  --color-indigo-500: #3e60ec;
  --color-indigo-700: #324dbd;
  --color-indigo-900: #1f3076;

  /* White */
  --color-white: #ffffff;

  /* ── Semantic aliases ────────────────────────────────────── */

  /* Primary (blue) */
  --color-primary-100: var(--color-blue-100);
  --color-primary-300: var(--color-blue-300);
  --color-primary-500: var(--color-blue-500);
  --color-primary-700: var(--color-blue-700);
  --color-primary-900: var(--color-blue-900);
  --color-primary-500-20-on-white: var(--color-blue-500-20-on-white);
  --color-primary-500-10-on-white: var(--color-blue-500-10-on-white);

  /* Secondary (teal) */
  --color-secondary-100: var(--color-teal-100);
  --color-secondary-300: var(--color-teal-300);
  --color-secondary-500: var(--color-teal-500);
  --color-secondary-700: var(--color-teal-700);
  --color-secondary-900: var(--color-teal-900);

  /* Neutral (gray) */
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);
  --color-neutral-900-5-on-white: var(--color-gray-900-5-on-white);

  /* Error (red) */
  --color-error-100: var(--color-red-100);
  --color-error-300: var(--color-red-300);
  --color-error-500: var(--color-red-500);
  --color-error-700: var(--color-red-700);
  --color-error-900: var(--color-red-900);
  --color-error-500-20-on-white: var(--color-red-500-20-on-white);

  /* Success (teal) */
  --color-success-100: var(--color-teal-100);
  --color-success-300: var(--color-teal-300);
  --color-success-500: var(--color-teal-500);
  --color-success-700: var(--color-teal-700);
  --color-success-900: var(--color-teal-900);

  /* Warning (orange) */
  --color-warning-100: var(--color-orange-100);
  --color-warning-300: var(--color-orange-300);
  --color-warning-500: var(--color-orange-500);
  --color-warning-700: var(--color-orange-700);
  --color-warning-900: var(--color-orange-900);

  /* Caution (yellow) */
  --color-caution-100: var(--color-yellow-100);
  --color-caution-300: var(--color-yellow-300);
  --color-caution-500: var(--color-yellow-500);
  --color-caution-700: var(--color-yellow-700);
  --color-caution-900: var(--color-yellow-900);

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-0:  0px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* ── Control sizing ──────────────────────────────────────── */
  --control-height: 44px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-0:    0px;
  --radius-4:    4px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-pill: 999px;

  /* ── Typography — font family ────────────────────────────── */
  --font-family-base: 'Inter', 'FC Iconic', 'Noto Sans Thai', system-ui, sans-serif;
  --font-family-th:   'FC Iconic', 'Noto Sans Thai', sans-serif;

  /* ── Typography — font size ──────────────────────────────── */
  --font-size-h1:      56px;
  --font-size-h2:      40px;
  --font-size-h3:      32px;
  --font-size-h4:      24px;
  --font-size-h5:      22px;
  --font-size-body-xl: 18px;
  --font-size-body-lg: 16px;
  --font-size-body-md: 14px;
  --font-size-body-sm: 13px;
  --font-size-body-xs: 12px;

  /* ── Typography — line height ────────────────────────────── */
  --line-height-h1:      72px;
  --line-height-h2:      56px;
  --line-height-h3:      40px;
  --line-height-h4:      32px;
  --line-height-h5:      30px;
  --line-height-body-xl: 26px;
  --line-height-body-lg: 24px;
  --line-height-body-md: 24px;
  --line-height-body-sm: 22px;
  --line-height-body-xs: 16px;

  /* ── Typography — font weight ────────────────────────────── */
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ── Shadow ──────────────────────────────────────────────── */
  --shadow-soft:
    0 8px 48px #2a304914,
    0 0px  8px #2a304914;
}