/*
  CSS Design Tokens for webdev.wat.tech
  Colors generated by Theme Machine | MIT License
  https://tools.keithjgrant.com/theme-machine/
*/
:root {
  /* Sand Scale (Neutrals) */
  --sand-1: oklch(98% 0.012 67);
  --sand-2: oklch(97% 0.024 67);
  --sand-3: oklch(93% 0.04 67);
  --sand-4: oklch(84% 0.048 67);
  --sand-5: oklch(80% 0.063 67);
  --sand-6: oklch(71% 0.075 67);
  --sand-7: oklch(66% 0.079 67);
  --sand-8: oklch(58% 0.083 67);
  --sand-9: oklch(53% 0.079 67);
  --sand-10: oklch(49% 0.075 67);
  --sand-11: oklch(42% 0.068 67);
  --sand-12: oklch(35% 0.059 67);
  --sand-13: oklch(27% 0.048 67);
  --sand-14: oklch(20% 0.036 67);
  --sand-15: oklch(16% 0.028 67);
  --sand-16: oklch(10% 0.02 67);

  /* Orange Scale (Primary Accent) */
  --orange-1: oklch(96.9% 0.041 85.4);
  --orange-2: oklch(95.9% 0.049 82.1);
  --orange-3: oklch(91.8% 0.085 75.5);
  --orange-4: oklch(82.7% 0.176 71);
  --orange-5: oklch(79.1% 0.202 66.2);
  --orange-6: oklch(71.2% 0.186 62.6);
  --orange-7: oklch(66.2% 0.174 62.3);
  --orange-8: oklch(58.2% 0.154 61.7);
  --orange-9: oklch(53.2% 0.141 61.2);
  --orange-10: oklch(49.2% 0.131 60.7);
  --orange-11: oklch(42.2% 0.113 59.7);
  --orange-12: oklch(35.2% 0.096 58.4);
  --orange-13: oklch(27.2% 0.076 56.1);
  --orange-14: oklch(20.1% 0.058 52.7);
  --orange-15: oklch(16.1% 0.049 49.7);
  --orange-16: oklch(10.1% 0.035 42);

  /* Cyan Scale (Secondary Accent) */
  --cyan-1: oklch(97.3% 0.045 195);
  --cyan-2: oklch(96.6% 0.053 197);
  --cyan-3: oklch(92.5% 0.085 205);
  --cyan-4: oklch(83.4% 0.161 211);
  --cyan-5: oklch(79.9% 0.186 213);
  --cyan-6: oklch(71.8% 0.173 220);
  --cyan-7: oklch(66.8% 0.161 220);
  --cyan-8: oklch(58.8% 0.142 220);
  --cyan-9: oklch(53.8% 0.13 221);
  --cyan-10: oklch(49.8% 0.121 221);
  --cyan-11: oklch(42.7% 0.104 221);
  --cyan-12: oklch(35.7% 0.088 222);
  --cyan-13: oklch(27.7% 0.069 224);
  --cyan-14: oklch(20.7% 0.052 226);
  --cyan-15: oklch(16.7% 0.043 228);
  --cyan-16: oklch(10.7% 0.029 234);

  /* Indigo Scale (Sparse Accent) */
  --indigo-1: oklch(97.6% 0.013 264);
  --indigo-2: oklch(96.5% 0.018 268);
  --indigo-3: oklch(92.5% 0.039 273);
  --indigo-4: oklch(83.4% 0.091 276);
  --indigo-5: oklch(79.4% 0.115 276);
  --indigo-6: oklch(70.2% 0.171 277);
  --indigo-7: oklch(65.1% 0.204 278);
  --indigo-8: oklch(56.8% 0.259 278);
  --indigo-9: oklch(51.6% 0.295 278);
  --indigo-10: oklch(49.3% 0.309 277);
  --indigo-11: oklch(43.5% 0.274 276);
  --indigo-12: oklch(36.5% 0.231 276);
  --indigo-13: oklch(28.5% 0.181 275);
  --indigo-14: oklch(21.5% 0.137 275);
  --indigo-15: oklch(17.5% 0.112 274);
  --indigo-16: oklch(11.5% 0.074 274);

  /* ===========================================
     Semantic Tokens
     =========================================== */

  /* Backgrounds - Light sand tones */
  --background-1: var(--sand-1);
  --background-2: var(--sand-2);
  --background-3: var(--sand-3);

  /* Text - Dark sand tones for readability */
  --text-1: var(--sand-14);
  --text-2: var(--sand-11);
  --text-3: var(--sand-8);

  /* Brand - Using orange-5/6 for visible orange (NOT orange-1 which is nearly white) */
  --brand-color: var(--orange-5);
  --brand-hover: var(--orange-6);

  /* Links - Orange tones */
  --link-color: var(--orange-6);
  --link-hover: var(--orange-7);

  /* Code - Cyan tones */
  --code-bg: var(--cyan-2);
  --code-text: var(--cyan-11);

  /* Alerts/Emphasis - Indigo (use sparingly) */
  --alert-bg: var(--indigo-2);
  --alert-text: var(--indigo-11);
  --alert-border: var(--indigo-6);

  /* ===========================================
     Typography
     =========================================== */
  --font-heading: 'Amulya', sans-serif;
  --font-body: 'Synonym', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ===========================================
     Spacing Scale
     =========================================== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ===========================================
     Layout
     =========================================== */
  --container-max: 60rem;
  --container-padding: var(--space-lg);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}