/* Teamkaengthai design tokens (draft, brand not confirmed)
   Layer 1: primitives (raw values). Layer 2: semantic (use these in UI).
   Palette: cool slate neutrals + one chili accent. Curry gradient is for backdrops only. */
:root {
  /* Primitives: color */
  --chili-50: #FCEDEA;
  --chili-500: #C93A25;
  --chili-600: #A82E1C;
  --chili-900: #4A140C;
  --turmeric-100: #FCEFCB;
  --turmeric-400: #F2A33A;
  --turmeric-800: #7A4F06;
  --basil-100: #DEF0DD;
  --basil-700: #2F6B2A;
  --slate-0: #FCFCFD;
  --slate-50: #F3F4F7;
  --slate-200: #E1E4EA;
  --slate-400: #9AA1AE;
  --slate-600: #555D6B;
  --slate-900: #161A21;

  /* Semantic: color */
  --color-bg: var(--slate-50);
  --color-surface: var(--slate-0);
  --color-surface-muted: var(--slate-50);
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-400);
  --color-text: var(--slate-900);
  --color-text-muted: var(--slate-600);
  --color-primary: var(--chili-500);
  --color-primary-hover: var(--chili-600);
  --color-primary-subtle: var(--chili-50);
  --color-on-primary: var(--slate-0);
  --color-success: var(--basil-700);
  --color-success-bg: var(--basil-100);
  --color-warning-bg: var(--turmeric-100);
  --color-warning-text: var(--turmeric-800);
  --color-danger: var(--chili-600);
  --color-annotation-bg: #FFF3B0; /* prototype notes only, not product UI */

  /* Gradients (curry) */
  --gradient-hero:
    radial-gradient(90% 70% at 0% 0%, var(--turmeric-400) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 10%, var(--chili-500) 0%, transparent 65%),
    linear-gradient(165deg, var(--chili-600) 0%, var(--chili-900) 100%);
  --gradient-canvas:
    radial-gradient(90% 45% at 100% 0%, rgb(201 58 37 / .16), transparent 70%),
    radial-gradient(80% 40% at 0% 100%, rgb(242 163 58 / .18), transparent 70%),
    var(--color-bg);
  --gradient-media: linear-gradient(140deg, #F6D7A8 0%, #E9967A 55%, #C93A25 100%);

  /* Glass (web frosted-glass approximation) */
  --glass-bg: rgb(252 252 253 / .72);
  --glass-bg-strong: rgb(252 252 253 / .86);
  --glass-border: rgb(255 255 255 / .65);
  --glass-blur: blur(20px) saturate(160%);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / .7);

  /* Typography */
  --font-sans: "IBM Plex Sans Thai", system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading: 1.5; /* Thai vowels/tone marks need room */

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius: cards 16, inputs 12, interactive pills full */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Elevation (tinted, never pure black) */
  --shadow-sm: 0 1px 2px rgb(22 26 33 / .06);
  --shadow-md: 0 8px 24px rgb(74 20 12 / .10);
}