/**
 * DesignerPunk Design System - Web Tokens
 * Generated: 2026-06-15T13:22:53.770Z
 * Version: 1.0.0
 * Platform: Web (CSS Custom Properties)
 *
 * USAGE GUIDANCE:
 * - Use semantic tokens (colorPrimary, borderDefault) for all UI development
 * - Use primitive tokens (purple300, space100) only when no semantic exists
 * - Comments show semantic → primitive relationships
 */

:root {
  color-scheme: light dark;

  /* ============================================
   * PRIMITIVE TOKENS
  Mathematical foundation
   * ============================================ */


  /* BLEND TOKENS */
  /* base × 1 = 0.04 × 1 = 0.04 */
  --blend-100: 0.04;
  /* base × 2 = 0.04 × 2 = 0.08 */
  --blend-200: 0.08;
  /* base × 3 = 0.04 × 3 = 0.12 */
  --blend-300: 0.12;
  /* base × 4 = 0.04 × 4 = 0.16 */
  --blend-400: 0.16;
  /* base × 5 = 0.04 × 5 = 0.20 */
  --blend-500: 0.2;

  /* BLUR TOKENS */
  /* 0 */
  --blur-000: 0px;
  /* base × 0.25 = 16 × 0.25 = 4 */
  --blur-025: 4px;
  /* base × 0.5 = 16 × 0.5 = 8 */
  --blur-050: 8px;
  /* base × 0.75 = 16 × 0.75 = 12 */
  --blur-075: 12px;
  /* base × 1 = 16 × 1 = 16 */
  --blur-100: 16px;
  /* base × 1.25 = 16 × 1.25 = 20 */
  --blur-125: 20px;
  /* base × 1.5 = 16 × 1.5 = 24 */
  --blur-150: 24px;
  /* base × 2 = 16 × 2 = 32 */
  --blur-200: 32px;
  /* base × 2.5 = 16 × 2.5 = 40 */
  --blur-250: 40px;

  /* BORDERWIDTH TOKENS */
  /* base × 0 = 1 × 0 = 0 */
  --border-width-000: 0px;
  /* base × 1 = 1 × 1 = 1 */
  --border-width-100: 1px;
  /* base × 2 = 1 × 2 = 2 */
  --border-width-200: 2px;
  /* base × 4 = 1 × 4 = 4 */
  --border-width-400: 4px;

  /* BREAKPOINT TOKENS */
  /* Practical device-based value */
  --breakpoint-xs: 320px;
  /* Practical device-based value */
  --breakpoint-sm: 375px;
  /* Practical device-based value */
  --breakpoint-md: 1024px;
  /* Practical device-based value */
  --breakpoint-lg: 1440px;

  /* COLOR TOKENS */
  --pink-hue: 10;
  --pink-l100: 0.92;
  --pink-l200: 0.76;
  --pink-l300: 0.65;
  --pink-l400: 0.55;
  --pink-l500: 0.4;
  --pink-c100: 0.045;
  --pink-c200: 0.16;
  --pink-c300: 0.242;
  --pink-c400: 0.203;
  --pink-c500: 0.141;
  --orange-hue: 39.5;
  --orange-l100: 0.94;
  --orange-l200: 0.84;
  --orange-l300: 0.7;
  --orange-l400: 0.6;
  --orange-l500: 0.46;
  --orange-c100: 0.031;
  --orange-c200: 0.089;
  --orange-c300: 0.193;
  --orange-c400: 0.162;
  --orange-c500: 0.121;
  --yellow-hue: 107;
  --yellow-l100: 0.98;
  --yellow-l200: 0.9;
  --yellow-l300: 0.8;
  --yellow-l400: 0.68;
  --yellow-l500: 0.56;
  --yellow-c100: 0.061;
  --yellow-c200: 0.14;
  --yellow-c300: 0.2;
  --yellow-c400: 0.169;
  --yellow-c500: 0.133;
  --green-hue: 154;
  --green-l100: 0.97;
  --green-l200: 0.88;
  --green-l300: 0.78;
  --green-l400: 0.66;
  --green-l500: 0.54;
  --green-c100: 0.029;
  --green-c200: 0.149;
  --green-c300: 0.208;
  --green-c400: 0.18;
  --green-c500: 0.14;
  --cyan-hue: 202.5;
  --cyan-l100: 0.96;
  --cyan-l200: 0.87;
  --cyan-l300: 0.76;
  --cyan-l400: 0.64;
  --cyan-l500: 0.52;
  --cyan-c100: 0.048;
  --cyan-c200: 0.108;
  --cyan-c300: 0.148;
  --cyan-c400: 0.125;
  --cyan-c500: 0.097;
  --teal-hue: 209;
  --teal-l100: 0.92;
  --teal-l200: 0.72;
  --teal-l300: 0.52;
  --teal-l400: 0.38;
  --teal-l500: 0.28;
  --teal-c100: 0.035;
  --teal-c200: 0.1;
  --teal-c300: 0.08;
  --teal-c400: 0.06;
  --teal-c500: 0.045;
  --purple-hue: 310;
  --purple-l100: 0.93;
  --purple-l200: 0.76;
  --purple-l300: 0.6;
  --purple-l400: 0.51;
  --purple-l500: 0.4;
  --purple-c100: 0.046;
  --purple-c200: 0.179;
  --purple-c300: 0.286;
  --purple-c400: 0.241;
  --purple-c500: 0.183;
  --neutral-hue: 260;
  --white-hue: 260;
  --white-l100: 1;
  --white-l200: 0.95;
  --white-l300: 0.9;
  --white-l400: 0.85;
  --white-l500: 0.8;
  --white-c100: 0;
  --white-c200: 0.006;
  --white-c300: 0.01;
  --white-c400: 0.013;
  --white-c500: 0.015;
  --gray-hue: 260;
  --gray-l100: 0.72;
  --gray-l200: 0.62;
  --gray-l300: 0.52;
  --gray-l400: 0.42;
  --gray-l500: 0.32;
  --gray-c100: 0.018;
  --gray-c200: 0.02;
  --gray-c300: 0.02;
  --gray-c400: 0.018;
  --gray-c500: 0.015;
  --black-hue: 260;
  --black-l100: 0.28;
  --black-l200: 0.21;
  --black-l300: 0.14;
  --black-l400: 0.07;
  --black-l500: 0;
  --black-c100: 0.013;
  --black-c200: 0.01;
  --black-c300: 0.008;
  --black-c400: 0.004;
  --black-c500: 0;
  --pink-100: oklch(0.92 0.045 10);
  --pink-200: oklch(0.76 0.16 10);
  --pink-300: oklch(0.65 0.242 10);
  --pink-400: oklch(0.55 0.203 10);
  --pink-500: oklch(0.4 0.141 10);
  --orange-100: oklch(0.94 0.031 39.5);
  --orange-200: oklch(0.84 0.089 39.5);
  --orange-300: oklch(0.7 0.193 39.5);
  --orange-400: oklch(0.6 0.162 39.5);
  --orange-500: oklch(0.46 0.121 39.5);
  --yellow-100: oklch(0.98 0.061 107);
  --yellow-200: oklch(0.9 0.14 107);
  --yellow-300: oklch(0.8 0.2 107);
  --yellow-400: oklch(0.68 0.169 107);
  --yellow-500: oklch(0.56 0.133 107);
  --green-100: oklch(0.97 0.029 154);
  --green-200: oklch(0.88 0.149 154);
  --green-300: oklch(0.78 0.208 154);
  --green-400: oklch(0.66 0.18 154);
  --green-500: oklch(0.54 0.14 154);
  --cyan-100: oklch(0.96 0.048 202.5);
  --cyan-200: oklch(0.87 0.108 202.5);
  --cyan-300: oklch(0.76 0.148 202.5);
  --cyan-400: oklch(0.64 0.125 202.5);
  --cyan-500: oklch(0.52 0.097 202.5);
  --teal-100: oklch(0.92 0.035 209);
  --teal-200: oklch(0.72 0.1 209);
  --teal-300: oklch(0.52 0.08 209);
  --teal-400: oklch(0.38 0.06 209);
  --teal-500: oklch(0.28 0.045 209);
  --purple-100: oklch(0.93 0.046 310);
  --purple-200: oklch(0.76 0.179 310);
  --purple-300: oklch(0.6 0.286 310);
  --purple-400: oklch(0.51 0.241 310);
  --purple-500: oklch(0.4 0.183 310);
  --white-100: oklch(1 0 260);
  --white-200: oklch(0.95 0.006 260);
  --white-300: oklch(0.9 0.01 260);
  --white-400: oklch(0.85 0.013 260);
  --white-500: oklch(0.8 0.015 260);
  --gray-100: oklch(0.72 0.018 260);
  --gray-200: oklch(0.62 0.02 260);
  --gray-300: oklch(0.52 0.02 260);
  --gray-400: oklch(0.42 0.018 260);
  --gray-500: oklch(0.32 0.015 260);
  --black-100: oklch(0.28 0.013 260);
  --black-200: oklch(0.21 0.01 260);
  --black-300: oklch(0.14 0.008 260);
  --black-400: oklch(0.07 0.004 260);
  --black-500: oklch(0 0 260);

  /* DENSITY TOKENS */
  /* base × 0.75 = 1.0 × 0.75 = 0.75 */
  --density-compact: 0.75;
  /* base × 1 = 1.0 × 1 = 1.0 */
  --density-default: 1;
  /* base × 1.25 = 1.0 × 1.25 = 1.25 */
  --density-comfortable: 1.25;
  /* base × 1.5 = 1.0 × 1.5 = 1.5 */
  --density-spacious: 1.5;

  /* FONTFAMILY TOKENS */
  /* N/A - Categorical value */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* N/A - Categorical value */
  --font-family-mono: "Commit Mono", "SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace;
  /* N/A - Categorical value */
  --font-family-display: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* N/A - Categorical value */
  --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* FONTSIZE TOKENS */
  /* base ÷ (1.125²) = 16 ÷ 1.266 ≈ 13 */
  --font-size-050: 0.8125rem;
  /* base ÷ 1.125 = 16 ÷ 1.125 ≈ 14 */
  --font-size-075: 0.875rem;
  /* base × 1 = 16 × 1 = 16 */
  --font-size-100: 1rem;
  /* base × 1.125 = 16 × 1.125 = 18 */
  --font-size-125: 1.125rem;
  /* base × (1.125²) = 16 × 1.266 ≈ 20 */
  --font-size-150: 1.25rem;
  /* base × (1.125³) = 16 × 1.424 ≈ 23 */
  --font-size-200: 1.4375rem;
  /* base × (1.125⁴) = 16 × 1.602 ≈ 26 */
  --font-size-300: 1.625rem;
  /* base × (1.125⁵) = 16 × 1.802 ≈ 29 */
  --font-size-400: 1.8125rem;
  /* base × (1.125⁶) = 16 × 2.027 ≈ 32.4 → 33 (adjusted for 4pt subgrid) */
  --font-size-500: 2.0625rem;
  /* base × (1.125⁷) = 16 × 2.281 ≈ 36.5 → 37 (adjusted for 4pt subgrid) */
  --font-size-600: 2.3125rem;
  /* base × (1.125⁸) = 16 × 2.566 ≈ 41.1 → 42 (adjusted for 4pt subgrid) */
  --font-size-700: 2.625rem;

  /* FONTWEIGHT TOKENS */
  /* base × 0.25 = 400 × 0.25 = 100 */
  --font-weight-100: 100;
  /* base × 0.5 = 400 × 0.5 = 200 */
  --font-weight-200: 200;
  /* base × 0.75 = 400 × 0.75 = 300 */
  --font-weight-300: 300;
  /* base × 1 = 400 × 1 = 400 */
  --font-weight-400: 400;
  /* base × 1.25 = 400 × 1.25 = 500 */
  --font-weight-500: 500;
  /* base × 1.5 = 400 × 1.5 = 600 */
  --font-weight-600: 600;
  /* base × 1.75 = 400 × 1.75 = 700 */
  --font-weight-700: 700;
  /* base × 2 = 400 × 2 = 800 */
  --font-weight-800: 800;
  /* base × 2.25 = 400 × 2.25 = 900 */
  --font-weight-900: 900;

  /* GLOW TOKENS */
  /* base × 1 = 0.8 × 1 = 0.8 */
  --glow-opacity-100: 0.8;
  /* base × 0.75 = 0.8 × 0.75 = 0.6 */
  --glow-opacity-200: 0.6;
  /* base × 0.5 = 0.8 × 0.5 = 0.4 */
  --glow-opacity-300: 0.4;
  /* base × 0.25 = 0.8 × 0.25 = 0.2 */
  --glow-opacity-400: 0.2;

  /* LETTERSPACING TOKENS */
  /* base - 0.025 = 0 - 0.025 = -0.025 */
  --letter-spacing-025: -0.025em;
  /* base - 0.05 = 0 - 0.05 = -0.05 */
  --letter-spacing-050: -0.05em;
  /* base × 1 = 0 × 1 = 0 */
  --letter-spacing-100: 0em;
  /* base + 0.025 = 0 + 0.025 = 0.025 */
  --letter-spacing-125: 0.025em;
  /* base + 0.05 = 0 + 0.05 = 0.05 */
  --letter-spacing-150: 0.05em;

  /* LINEHEIGHT TOKENS */
  /* fontSize050 × baseValue ≈ 20 */
  --line-height-050: 1.538;
  /* fontSize075 × baseValue ≈ 20 */
  --line-height-075: 1.429;
  /* fontSize100 × baseValue = 24 */
  --line-height-100: 1.5;
  /* fontSize125 × baseValue ≈ 28 */
  --line-height-125: 1.556;
  /* fontSize150 × baseValue = 28 */
  --line-height-150: 1.4;
  /* fontSize200 × baseValue ≈ 32 */
  --line-height-200: 1.391;
  /* fontSize300 × baseValue ≈ 32 */
  --line-height-300: 1.231;
  /* fontSize400 × baseValue ≈ 36 */
  --line-height-400: 1.241;
  /* fontSize500 × baseValue ≈ 40 */
  --line-height-500: 1.212;
  /* fontSize600 × baseValue ≈ 44 */
  --line-height-600: 1.19;
  /* fontSize700 × baseValue ≈ 48 */
  --line-height-700: 1.143;

  /* OPACITY TOKENS */
  /* base × 0 = 0.08 × 0 = 0.0 */
  --opacity-000: 0;
  /* base × 1 = 0.08 × 1 = 0.08 */
  --opacity-008: 0.08;
  /* base × 2 = 0.08 × 2 = 0.16 */
  --opacity-016: 0.16;
  /* base × 3 = 0.08 × 3 = 0.24 */
  --opacity-024: 0.24;
  /* base × 4 = 0.08 × 4 = 0.32 */
  --opacity-032: 0.32;
  /* base × 5 = 0.08 × 5 = 0.40 */
  --opacity-040: 0.4;
  /* base × 6 = 0.08 × 6 = 0.48 */
  --opacity-048: 0.48;
  /* base × 7 = 0.08 × 7 = 0.56 */
  --opacity-056: 0.56;
  /* base × 8 = 0.08 × 8 = 0.64 */
  --opacity-064: 0.64;
  /* base × 9 = 0.08 × 9 = 0.72 */
  --opacity-072: 0.72;
  /* base × 10 = 0.08 × 10 = 0.80 */
  --opacity-080: 0.8;
  /* base × 11 = 0.08 × 11 = 0.88 */
  --opacity-088: 0.88;
  /* base × 12 = 0.08 × 12 = 0.96 */
  --opacity-096: 0.96;
  /* Special case: full opacity = 1.0 */
  --opacity-100: 1;

  /* RADIUS TOKENS */
  /* base × 0 = 8 × 0 = 0 */
  --radius-000: 0px;
  /* base × 0.25 = 8 × 0.25 = 2 */
  --radius-025: 2px;
  /* base × 0.5 = 8 × 0.5 = 4 */
  --radius-050: 4px;
  /* base × 0.75 = 8 × 0.75 = 6 */
  --radius-075: 6px;
  /* base × 1 = 8 × 1 = 8 */
  --radius-100: 8px;
  /* base × 1.25 = 8 × 1.25 = 10 */
  --radius-125: 10px;
  /* base × 1.5 = 8 × 1.5 = 12 */
  --radius-150: 12px;
  /* base × 2 = 8 × 2 = 16 */
  --radius-200: 16px;
  /* base × 2.5 = 8 × 2.5 = 20 */
  --radius-250: 20px;
  /* base × 3 = 8 × 3 = 24 */
  --radius-300: 24px;
  /* base × 4 = 8 × 4 = 32 */
  --radius-400: 32px;
  /* special case = 9999 (effectively infinite) */
  --radius-max: 9999px;
  /* percentage = 50% (creates circle from square) */
  --radius-half: 50%;

  /* SHADOW TOKENS */
  /* base × 1 = 4 × 1 = 4 */
  --shadow-offset-x-100: 4px;
  /* base × 1.5 = 4 × 1.5 = 6 */
  --shadow-offset-x-150: 6px;
  /* base × 2 = 4 × 2 = 8 */
  --shadow-offset-x-200: 8px;
  /* base × 3 = 4 × 3 = 12 */
  --shadow-offset-x-300: 12px;
  /* base × -3 = 4 × -3 = -12 */
  --shadow-offset-x-n-300: -12px;
  /* base × -2 = 4 × -2 = -8 */
  --shadow-offset-x-n-200: -8px;
  /* base × -1.5 = 4 × -1.5 = -6 */
  --shadow-offset-x-n-150: -6px;
  /* base × -1 = 4 × -1 = -4 */
  --shadow-offset-x-n-100: -4px;
  /* base × 0 = 4 × 0 = 0 */
  --shadow-offset-x-000: 0px;
  /* base × 1 = 4 × 1 = 4 */
  --shadow-offset-y-100: 4px;
  /* base × 2 = 4 × 2 = 8 */
  --shadow-offset-y-200: 8px;
  /* base × 3 = 4 × 3 = 12 */
  --shadow-offset-y-300: 12px;
  /* base × 4 = 4 × 4 = 16 */
  --shadow-offset-y-400: 16px;
  /* base × 0 = 4 × 0 = 0 */
  --shadow-offset-y-000: 0px;
  /* base × 0 = 0.3 × 0 = 0 */
  --shadow-opacity-none: 0;
  /* base × 1.33 = 0.3 × 1.33 ≈ 0.4 */
  --shadow-opacity-hard: 0.4;
  /* base × 1 = 0.3 × 1 = 0.3 */
  --shadow-opacity-moderate: 0.3;
  /* base × 0.67 = 0.3 × 0.67 ≈ 0.2 */
  --shadow-opacity-soft: 0.2;
  /* base × 1.17 = 0.3 × 1.17 ≈ 0.35 */
  --shadow-opacity-depth-200: 0.35;
  /* base × 1.33 = 0.3 × 1.33 ≈ 0.4 */
  --shadow-opacity-depth-300: 0.4;

  /* SIZING TOKENS */
  /* base × 0.5 = 8 × 0.5 = 4 */
  --size-050: 4px;
  /* base × 1 = 8 × 1 = 8 */
  --size-100: 8px;
  /* base × 1.5 = 8 × 1.5 = 12 */
  --size-150: 12px;
  /* base × 2 = 8 × 2 = 16 */
  --size-200: 16px;
  /* base × 2.5 = 8 × 2.5 = 20 */
  --size-250: 20px;
  /* base × 3 = 8 × 3 = 24 */
  --size-300: 24px;
  /* base × 4 = 8 × 4 = 32 */
  --size-400: 32px;
  /* base × 5 = 8 × 5 = 40 */
  --size-500: 40px;
  /* base × 6 = 8 × 6 = 48 */
  --size-600: 48px;
  /* base × 7 = 8 × 7 = 56 */
  --size-700: 56px;
  /* base × 8 = 8 × 8 = 64 */
  --size-800: 64px;
  /* base × 9 = 8 × 9 = 72 */
  --size-900: 72px;
  /* base × 10 = 8 × 10 = 80 */
  --size-1000: 80px;
  /* base × 16 = 8 × 16 = 128 */
  --size-1600: 128px;

  /* SPACING TOKENS */
  /* base × 0 = 8 × 0 = 0 */
  --space-000: 0px;
  /* base × 0.25 = 8 × 0.25 = 2 */
  --space-025: 2px;
  /* base × 0.5 = 8 × 0.5 = 4 */
  --space-050: 4px;
  /* space100 × 0.75 */
  --space-075: 6px;
  /* base × 1 = 8 × 1 = 8 */
  --space-100: 8px;
  /* space100 × 1.25 */
  --space-125: 10px;
  /* base × 1.5 = 8 × 1.5 = 12 */
  --space-150: 12px;
  /* base × 2 = 8 × 2 = 16 */
  --space-200: 16px;
  /* space100 × 2.5 */
  --space-250: 20px;
  /* base × 3 = 8 × 3 = 24 */
  --space-300: 24px;
  /* base × 4 = 8 × 4 = 32 */
  --space-400: 32px;
  /* base × 5 = 8 × 5 = 40 */
  --space-500: 40px;
  /* base × 6 = 8 × 6 = 48 */
  --space-600: 48px;
  /* base × 7 = 8 × 7 = 56 */
  --space-700: 56px;
  /* base × 8 = 8 × 8 = 64 */
  --space-800: 64px;
  /* base × 9 = 8 × 9 = 72 */
  --space-900: 72px;
  /* base × 12 = 8 × 12 = 96 */
  --space-1200: 96px;
  /* base × 16 = 8 × 16 = 128 */
  --space-1600: 128px;

  /* TAPAREA TOKENS */
  /* base × 1 = 44 × 1 = 44 */
  --tap-area-minimum: 44px;
  /* base × 1.09 = 44 × 1.09 ≈ 48 */
  --tap-area-recommended: 48px;
  /* base × 1.27 = 44 × 1.27 ≈ 56 */
  --tap-area-comfortable: 56px;
  /* base × 1.45 = 44 × 1.45 ≈ 64 */
  --tap-area-generous: 64px;

  /* ============================================
   * SEMANTIC TOKENS
  Use these for UI development
   * ============================================ */

  --color-feedback-success-text: oklch(0.66 0.18 154);
  --color-feedback-success-background: oklch(0.97 0.029 154);
  --color-feedback-success-border: oklch(0.66 0.18 154);
  --color-feedback-error-text: oklch(0.55 0.203 10);
  --color-feedback-error-background: oklch(0.92 0.045 10);
  --color-feedback-error-border: oklch(0.55 0.203 10);
  --color-feedback-warning-text: oklch(0.6 0.162 39.5);
  --color-feedback-warning-background: oklch(0.94 0.031 39.5);
  --color-feedback-warning-border: oklch(0.6 0.162 39.5);
  --color-feedback-info-text: oklch(0.38 0.06 209);
  --color-feedback-info-background: oklch(0.92 0.035 209);
  --color-feedback-info-border: oklch(0.38 0.06 209);
  --color-feedback-select-text-rest: oklch(0.64 0.125 202.5);
  --color-feedback-select-text-default: oklch(0.62 0.02 260);
  --color-feedback-select-background-rest: oklch(0.96 0.048 202.5);
  --color-feedback-select-background-default: oklch(0.72 0.018 260);
  --color-feedback-select-border-rest: oklch(0.64 0.125 202.5);
  --color-feedback-select-border-default: oklch(0.62 0.02 260);
  --color-feedback-notification-background: oklch(0.55 0.203 10);
  --color-feedback-notification-text: oklch(1 0 260);
  --color-identity-human: oklch(0.7 0.193 39.5);
  --color-identity-agent: oklch(0.72 0.1 209);
  --color-action-primary: oklch(0.65 0.242 10);
  --color-action-secondary: oklch(0.42 0.018 260);
  --color-action-navigation: light-dark(oklch(0.52 0.097 202.5), oklch(0.96 0.048 202.5));
  --color-attention: oklch(0.68 0.169 107);
  --color-highlight: oklch(0.8 0.2 107);
  --color-tech: oklch(0.51 0.241 310);
  --color-data: oklch(0.6 0.286 310);
  --color-text-default: oklch(0.52 0.02 260);
  --color-text-muted: oklch(0.62 0.02 260);
  --color-text-subtle: oklch(0.72 0.018 260);
  --color-text-strong: oklch(0.14 0.008 260);
  --color-contrast-on-light: oklch(0 0 260);
  --color-contrast-on-dark: oklch(1 0 260);
  --color-contrast-on-action: oklch(0 0 260);
  --color-structure-canvas: light-dark(oklch(1 0 260), oklch(0.42 0.018 260));
  --color-structure-surface: oklch(0.95 0.006 260);
  --color-structure-surface-primary: oklch(0.95 0.006 260);
  --color-structure-surface-secondary: oklch(0.9 0.01 260);
  --color-structure-surface-tertiary: oklch(0.85 0.013 260);
  --color-structure-border: oklch(0.72 0.018 260);
  --color-structure-border-subtle: light-dark(oklch(0.72 0.018 260 / 0.48), oklch(0.32 0.015 260 / 0.48));
  --color-background-primary-subtle: light-dark(oklch(0.96 0.048 202.5), oklch(0.52 0.097 202.5));
  --color-icon-default: oklch(0.62 0.02 260);
  --color-icon-navigation-inactive: light-dark(oklch(0.52 0.02 260), oklch(0.72 0.018 260));
  --color-print-default: oklch(0.28 0.013 260);
  --glow-neon-purple: oklch(0.4 0.183 310);
  --glow-neon-cyan: oklch(0.52 0.097 202.5);
  --glow-neon-yellow: oklch(0.56 0.133 107);
  --glow-neon-green: oklch(0.78 0.208 154);
  --glow-neon-pink: oklch(0.4 0.141 10);
  --color-progress-current-background: oklch(0.76 0.148 202.5);
  --color-progress-current-text: oklch(0.64 0.125 202.5);
  --color-progress-pending-background: oklch(0.9 0.01 260);
  --color-progress-pending-text: oklch(0.52 0.02 260);
  --color-progress-pending-connector: oklch(0.95 0.006 260);
  --color-progress-completed-background: oklch(0.97 0.029 154);
  --color-progress-completed-text: oklch(0.66 0.18 154);
  --color-progress-completed-connector: oklch(0.97 0.029 154);
  --color-progress-error-background: oklch(0.92 0.045 10);
  --color-progress-error-text: oklch(0.55 0.203 10);
  --color-scrim-standard: oklch(0 0 260 / 0.8);
  --typography-body-sm-font-size: var(--font-size-075);
  --typography-body-sm-line-height: var(--line-height-075);
  --typography-body-sm-font-family: var(--font-family-body);
  --typography-body-sm-font-weight: var(--font-weight-400);
  --typography-body-sm-letter-spacing: var(--letter-spacing-100);
  --typography-body-md-font-size: var(--font-size-100);
  --typography-body-md-line-height: var(--line-height-100);
  --typography-body-md-font-family: var(--font-family-body);
  --typography-body-md-font-weight: var(--font-weight-400);
  --typography-body-md-letter-spacing: var(--letter-spacing-100);
  --typography-body-lg-font-size: var(--font-size-125);
  --typography-body-lg-line-height: var(--line-height-125);
  --typography-body-lg-font-family: var(--font-family-body);
  --typography-body-lg-font-weight: var(--font-weight-400);
  --typography-body-lg-letter-spacing: var(--letter-spacing-100);
  --typography-h-1-font-size: var(--font-size-600);
  --typography-h-1-line-height: var(--line-height-600);
  --typography-h-1-font-family: var(--font-family-display);
  --typography-h-1-font-weight: var(--font-weight-700);
  --typography-h-1-letter-spacing: var(--letter-spacing-100);
  --typography-h-2-font-size: var(--font-size-500);
  --typography-h-2-line-height: var(--line-height-500);
  --typography-h-2-font-family: var(--font-family-display);
  --typography-h-2-font-weight: var(--font-weight-700);
  --typography-h-2-letter-spacing: var(--letter-spacing-100);
  --typography-h-3-font-size: var(--font-size-400);
  --typography-h-3-line-height: var(--line-height-400);
  --typography-h-3-font-family: var(--font-family-display);
  --typography-h-3-font-weight: var(--font-weight-600);
  --typography-h-3-letter-spacing: var(--letter-spacing-100);
  --typography-h-4-font-size: var(--font-size-300);
  --typography-h-4-line-height: var(--line-height-300);
  --typography-h-4-font-family: var(--font-family-display);
  --typography-h-4-font-weight: var(--font-weight-600);
  --typography-h-4-letter-spacing: var(--letter-spacing-100);
  --typography-h-5-font-size: var(--font-size-200);
  --typography-h-5-line-height: var(--line-height-200);
  --typography-h-5-font-family: var(--font-family-display);
  --typography-h-5-font-weight: var(--font-weight-600);
  --typography-h-5-letter-spacing: var(--letter-spacing-100);
  --typography-h-6-font-size: var(--font-size-150);
  --typography-h-6-line-height: var(--line-height-150);
  --typography-h-6-font-family: var(--font-family-display);
  --typography-h-6-font-weight: var(--font-weight-700);
  --typography-h-6-letter-spacing: var(--letter-spacing-100);
  --typography-caption-font-size: var(--font-size-050);
  --typography-caption-line-height: var(--line-height-050);
  --typography-caption-font-family: var(--font-family-body);
  --typography-caption-font-weight: var(--font-weight-300);
  --typography-caption-letter-spacing: var(--letter-spacing-100);
  --typography-legal-font-size: var(--font-size-050);
  --typography-legal-line-height: var(--line-height-050);
  --typography-legal-font-family: var(--font-family-body);
  --typography-legal-font-weight: var(--font-weight-400);
  --typography-legal-letter-spacing: var(--letter-spacing-100);
  --typography-display-font-size: var(--font-size-700);
  --typography-display-line-height: var(--line-height-700);
  --typography-display-font-family: var(--font-family-display);
  --typography-display-font-weight: var(--font-weight-700);
  --typography-display-letter-spacing: var(--letter-spacing-100);
  --typography-button-sm-font-size: var(--font-size-075);
  --typography-button-sm-line-height: var(--line-height-075);
  --typography-button-sm-font-family: var(--font-family-body);
  --typography-button-sm-font-weight: var(--font-weight-500);
  --typography-button-sm-letter-spacing: var(--letter-spacing-100);
  --typography-button-md-font-size: var(--font-size-100);
  --typography-button-md-line-height: var(--line-height-100);
  --typography-button-md-font-family: var(--font-family-body);
  --typography-button-md-font-weight: var(--font-weight-500);
  --typography-button-md-letter-spacing: var(--letter-spacing-100);
  --typography-button-lg-font-size: var(--font-size-125);
  --typography-button-lg-line-height: var(--line-height-125);
  --typography-button-lg-font-family: var(--font-family-body);
  --typography-button-lg-font-weight: var(--font-weight-500);
  --typography-button-lg-letter-spacing: var(--letter-spacing-100);
  --typography-input-font-size: var(--font-size-100);
  --typography-input-line-height: var(--line-height-100);
  --typography-input-font-family: var(--font-family-body);
  --typography-input-font-weight: var(--font-weight-400);
  --typography-input-letter-spacing: var(--letter-spacing-100);
  --typography-label-xs-font-size: var(--font-size-050);
  --typography-label-xs-line-height: var(--line-height-050);
  --typography-label-xs-font-family: var(--font-family-body);
  --typography-label-xs-font-weight: var(--font-weight-500);
  --typography-label-xs-letter-spacing: var(--letter-spacing-100);
  --typography-label-sm-font-size: var(--font-size-075);
  --typography-label-sm-line-height: var(--line-height-075);
  --typography-label-sm-font-family: var(--font-family-body);
  --typography-label-sm-font-weight: var(--font-weight-500);
  --typography-label-sm-letter-spacing: var(--letter-spacing-100);
  --typography-label-md-font-size: var(--font-size-100);
  --typography-label-md-line-height: var(--line-height-100);
  --typography-label-md-font-family: var(--font-family-body);
  --typography-label-md-font-weight: var(--font-weight-500);
  --typography-label-md-letter-spacing: var(--letter-spacing-100);
  --typography-label-md-float-font-size: var(--font-size-075);
  --typography-label-md-float-line-height: var(--line-height-075);
  --typography-label-md-float-font-family: var(--font-family-body);
  --typography-label-md-float-font-weight: var(--font-weight-500);
  --typography-label-md-float-letter-spacing: var(--letter-spacing-100);
  --typography-label-lg-font-size: var(--font-size-125);
  --typography-label-lg-line-height: var(--line-height-125);
  --typography-label-lg-font-family: var(--font-family-body);
  --typography-label-lg-font-weight: var(--font-weight-500);
  --typography-label-lg-letter-spacing: var(--letter-spacing-100);
  --typography-code-sm-font-size: var(--font-size-075);
  --typography-code-sm-line-height: var(--line-height-075);
  --typography-code-sm-font-family: var(--font-family-mono);
  --typography-code-sm-font-weight: var(--font-weight-400);
  --typography-code-sm-letter-spacing: var(--letter-spacing-100);
  --typography-code-md-font-size: var(--font-size-100);
  --typography-code-md-line-height: var(--line-height-100);
  --typography-code-md-font-family: var(--font-family-mono);
  --typography-code-md-font-weight: var(--font-weight-400);
  --typography-code-md-letter-spacing: var(--letter-spacing-100);
  --typography-code-lg-font-size: var(--font-size-125);
  --typography-code-lg-line-height: var(--line-height-125);
  --typography-code-lg-font-family: var(--font-family-mono);
  --typography-code-lg-font-weight: var(--font-weight-400);
  --typography-code-lg-letter-spacing: var(--letter-spacing-100);
  --shadow-none-offset-x: var(--shadow-offset-x-000);
  --shadow-none-offset-y: var(--shadow-offset-y-000);
  --shadow-none-blur: var(--blur-000);
  --shadow-none-opacity: var(--shadow-opacity-none);
  --shadow-none-color: var(--shadow-black-100);
  --shadow-none: var(--shadow-none-offset-x) var(--shadow-none-offset-y) var(--shadow-none-blur) rgba(0, 0, 0, var(--shadow-none-opacity));
  --shadow-container-offset-x: var(--shadow-offset-x-000);
  --shadow-container-offset-y: var(--shadow-offset-y-100);
  --shadow-container-blur: var(--blur-075);
  --shadow-container-opacity: var(--shadow-opacity-moderate);
  --shadow-container-color: var(--shadow-black-100);
  --shadow-container: var(--shadow-container-offset-x) var(--shadow-container-offset-y) var(--shadow-container-blur) rgba(0, 0, 0, var(--shadow-container-opacity));
  --shadow-navigation-offset-x: var(--shadow-offset-x-000);
  --shadow-navigation-offset-y: var(--shadow-offset-y-100);
  --shadow-navigation-blur: var(--blur-125);
  --shadow-navigation-opacity: var(--shadow-opacity-soft);
  --shadow-navigation-color: var(--shadow-black-100);
  --shadow-navigation: var(--shadow-navigation-offset-x) var(--shadow-navigation-offset-y) var(--shadow-navigation-blur) rgba(0, 0, 0, var(--shadow-navigation-opacity));
  --shadow-dropdown-offset-x: var(--shadow-offset-x-000);
  --shadow-dropdown-offset-y: var(--shadow-offset-y-100);
  --shadow-dropdown-blur: var(--blur-075);
  --shadow-dropdown-opacity: var(--shadow-opacity-moderate);
  --shadow-dropdown-color: var(--shadow-black-100);
  --shadow-dropdown: var(--shadow-dropdown-offset-x) var(--shadow-dropdown-offset-y) var(--shadow-dropdown-blur) rgba(0, 0, 0, var(--shadow-dropdown-opacity));
  --shadow-modal-offset-x: var(--shadow-offset-x-000);
  --shadow-modal-offset-y: var(--shadow-offset-y-200);
  --shadow-modal-blur: var(--blur-100);
  --shadow-modal-opacity: var(--shadow-opacity-depth-200);
  --shadow-modal-color: var(--shadow-black-100);
  --shadow-modal: var(--shadow-modal-offset-x) var(--shadow-modal-offset-y) var(--shadow-modal-blur) rgba(0, 0, 0, var(--shadow-modal-opacity));
  --shadow-toast-offset-x: var(--shadow-offset-x-000);
  --shadow-toast-offset-y: var(--shadow-offset-y-300);
  --shadow-toast-blur: var(--blur-150);
  --shadow-toast-opacity: var(--shadow-opacity-depth-300);
  --shadow-toast-color: var(--shadow-black-100);
  --shadow-toast: var(--shadow-toast-offset-x) var(--shadow-toast-offset-y) var(--shadow-toast-blur) rgba(0, 0, 0, var(--shadow-toast-opacity));
  --shadow-tooltip-offset-x: var(--shadow-offset-x-000);
  --shadow-tooltip-offset-y: var(--shadow-offset-y-300);
  --shadow-tooltip-blur: var(--blur-150);
  --shadow-tooltip-opacity: var(--shadow-opacity-depth-300);
  --shadow-tooltip-color: var(--shadow-black-100);
  --shadow-tooltip: var(--shadow-tooltip-offset-x) var(--shadow-tooltip-offset-y) var(--shadow-tooltip-blur) rgba(0, 0, 0, var(--shadow-tooltip-opacity));
  --shadow-fab-offset-x: var(--shadow-offset-x-300);
  --shadow-fab-offset-y: var(--shadow-offset-y-400);
  --shadow-fab-blur: var(--blur-025);
  --shadow-fab-opacity: var(--shadow-opacity-hard);
  --shadow-fab-color: var(--shadow-blue-100);
  --shadow-fab: var(--shadow-fab-offset-x) var(--shadow-fab-offset-y) var(--shadow-fab-blur) rgba(0, 0, 0, var(--shadow-fab-opacity));
  --shadow-hover-offset-x: var(--shadow-offset-x-000);
  --shadow-hover-offset-y: var(--shadow-offset-y-100);
  --shadow-hover-blur: var(--blur-125);
  --shadow-hover-opacity: var(--shadow-opacity-soft);
  --shadow-hover-color: var(--shadow-black-100);
  --shadow-hover: var(--shadow-hover-offset-x) var(--shadow-hover-offset-y) var(--shadow-hover-blur) rgba(0, 0, 0, var(--shadow-hover-opacity));
  --shadow-navigation-indicator-offset-x: var(--shadow-offset-x-000);
  --shadow-navigation-indicator-offset-y: var(--shadow-offset-y-000);
  --shadow-navigation-indicator-blur: var(--blur-025);
  --shadow-navigation-indicator-opacity: var(--shadow-opacity-soft);
  --shadow-navigation-indicator-color: var(--shadow-black-100);
  --shadow-navigation-indicator: var(--shadow-navigation-indicator-offset-x) var(--shadow-navigation-indicator-offset-y) var(--shadow-navigation-indicator-blur) rgba(0, 0, 0, var(--shadow-navigation-indicator-opacity));
  --shadow-sunrise-offset-x: var(--shadow-offset-x-n-300);
  --shadow-sunrise-offset-y: var(--shadow-offset-y-200);
  --shadow-sunrise-blur: var(--blur-075);
  --shadow-sunrise-opacity: var(--shadow-opacity-moderate);
  --shadow-sunrise-color: var(--shadow-blue-100);
  --shadow-sunrise: var(--shadow-sunrise-offset-x) var(--shadow-sunrise-offset-y) var(--shadow-sunrise-blur) rgba(0, 0, 0, var(--shadow-sunrise-opacity));
  --shadow-morning-offset-x: var(--shadow-offset-x-n-150);
  --shadow-morning-offset-y: var(--shadow-offset-y-200);
  --shadow-morning-blur: var(--blur-075);
  --shadow-morning-opacity: var(--shadow-opacity-moderate);
  --shadow-morning-color: var(--shadow-black-100);
  --shadow-morning: var(--shadow-morning-offset-x) var(--shadow-morning-offset-y) var(--shadow-morning-blur) rgba(0, 0, 0, var(--shadow-morning-opacity));
  --shadow-noon-offset-x: var(--shadow-offset-x-000);
  --shadow-noon-offset-y: var(--shadow-offset-y-200);
  --shadow-noon-blur: var(--blur-075);
  --shadow-noon-opacity: var(--shadow-opacity-moderate);
  --shadow-noon-color: var(--shadow-black-100);
  --shadow-noon: var(--shadow-noon-offset-x) var(--shadow-noon-offset-y) var(--shadow-noon-blur) rgba(0, 0, 0, var(--shadow-noon-opacity));
  --shadow-dusk-offset-x: var(--shadow-offset-x-150);
  --shadow-dusk-offset-y: var(--shadow-offset-y-200);
  --shadow-dusk-blur: var(--blur-075);
  --shadow-dusk-opacity: var(--shadow-opacity-moderate);
  --shadow-dusk-color: var(--shadow-black-100);
  --shadow-dusk: var(--shadow-dusk-offset-x) var(--shadow-dusk-offset-y) var(--shadow-dusk-blur) rgba(0, 0, 0, var(--shadow-dusk-opacity));
  --shadow-sunset-offset-x: var(--shadow-offset-x-300);
  --shadow-sunset-offset-y: var(--shadow-offset-y-200);
  --shadow-sunset-blur: var(--blur-075);
  --shadow-sunset-opacity: var(--shadow-opacity-moderate);
  --shadow-sunset-color: var(--shadow-blue-100);
  --shadow-sunset: var(--shadow-sunset-offset-x) var(--shadow-sunset-offset-y) var(--shadow-sunset-blur) rgba(0, 0, 0, var(--shadow-sunset-opacity));
  --opacity-subtle: var(--opacity-088);
  --opacity-medium: var(--opacity-072);
  --opacity-heavy: var(--opacity-048);
  --opacity-ghost: var(--opacity-032);
  --blend-hover-darker: var(--blend-200);
  --blend-hover-lighter: var(--blend-200);
  --blend-pressed-darker: var(--blend-300);
  --blend-pressed-lighter: var(--blend-300);
  --blend-focus-saturate: var(--blend-200);
  --blend-disabled-desaturate: var(--blend-300);
  --blend-container-hover-darker: var(--blend-100);
  --color-icon-optical-balance: var(--blend-200);
  --grid-gutter-xs: var(--space-200);
  --grid-gutter-sm: var(--space-250);
  --grid-gutter-md: var(--space-300);
  --grid-gutter-lg: var(--space-400);
  --grid-margin-xs: var(--space-300);
  --grid-margin-sm: var(--space-300);
  --grid-margin-md: var(--space-400);
  --grid-margin-lg: var(--space-500);
  --grid-gutter-native: var(--space-250);
  --grid-margin-native: var(--space-300);
  --icon-stroke-width: var(--border-width-200);
  --icon-size-050: 16px; /* Icon size calculated from fontSize050 × custom multiplier = 13 × 1.231 = 16px (rounded from 16.003). Uses optical correction multiplier instead of lineHeight050 (1.538) for better balance with small text. | Pairs with: Icon size for caption, legal, labelXs typography (smallest text) */
  --icon-size-075: 20px; /* Icon size calculated from fontSize075 × lineHeight075 = 14 × 1.429 = 20px (rounded from 20.006) | Pairs with: Icon size for bodySm, buttonSm, labelSm typography */
  --icon-size-100: 24px; /* Icon size calculated from fontSize100 × lineHeight100 = 16 × 1.5 = 24px | Pairs with: Icon size for bodyMd, buttonMd, labelMd, input typography (standard) */
  --icon-size-125: 28px; /* Icon size calculated from fontSize125 × lineHeight125 = 18 × 1.556 = 28px (rounded from 28.008) | Pairs with: Icon size for bodyLg, buttonLg, labelLg typography */
  --icon-size-150: 28px; /* Icon size calculated from fontSize150 × lineHeight150 = 20 × 1.4 = 28px | Pairs with: Icon size for h6 typography (smallest heading) */
  --icon-size-200: 32px; /* Icon size calculated from fontSize200 × lineHeight200 = 23 × 1.391 = 32px (rounded from 31.993) | Pairs with: Icon size for h5 typography */
  --icon-size-300: 32px; /* Icon size calculated from fontSize300 × lineHeight300 = 26 × 1.231 = 32px (rounded from 32.006) | Pairs with: Icon size for h4 typography */
  --icon-size-400: 36px; /* Icon size calculated from fontSize400 × lineHeight400 = 29 × 1.241 = 36px (rounded from 35.989) | Pairs with: Icon size for h3 typography */
  --icon-size-500: 40px; /* Icon size calculated from fontSize500 × lineHeight500 = 33 × 1.212 = 40px (rounded from 39.996) | Pairs with: Icon size for h2 typography */
  --icon-size-600: 44px; /* Icon size calculated from fontSize600 × lineHeight600 = 37 × 1.19 = 44px (rounded from 44.03) | Pairs with: Icon size for h1 typography */
  --icon-size-700: 48px; /* Icon size calculated from fontSize700 × lineHeight700 = 42 × 1.143 = 48px (rounded from 48.006) | Pairs with: Icon size for display typography (hero text) */
  /* WCAG 2.4.7 Focus Visible */
  --accessibility-focus-offset: var(--space-025);
  /* WCAG 2.4.7 Focus Visible */
  --accessibility-focus-width: var(--border-width-200);
  /* WCAG 2.4.7 Focus Visible */
  --accessibility-focus-color: oklch(0.65 0.242 10);
  --border-none: var(--border-width-000);
  --border-default: var(--border-width-100);
  --border-emphasis: var(--border-width-200);
  --border-heavy: var(--border-width-400);
  --radius-none: var(--radius-000);
  --radius-subtle: var(--radius-025);
  --radius-small: var(--radius-050);
  --radius-normal: var(--radius-100);
  --radius-large: var(--radius-200);
  --radius-full: var(--radius-max);
  --radius-circle: var(--radius-half);
  --space-grouped-none: var(--space-000);
  --space-grouped-minimal: var(--space-025);
  --space-grouped-tight: var(--space-050);
  --space-grouped-normal: var(--space-100);
  --space-grouped-loose: var(--space-150);
  --space-related-none: var(--space-000);
  --space-related-tight: var(--space-100);
  --space-related-normal: var(--space-200);
  --space-related-loose: var(--space-300);
  --space-separated-none: var(--space-000);
  --space-separated-tight: var(--space-200);
  --space-separated-normal: var(--space-300);
  --space-separated-loose: var(--space-400);
  --space-sectioned-none: var(--space-000);
  --space-sectioned-tight: var(--space-400);
  --space-sectioned-normal: var(--space-500);
  --space-sectioned-loose: var(--space-600);
  --space-sectioned-generous: var(--space-1200);
  --space-sectioned-expansive: var(--space-1600);
  --space-inset-100: var(--space-100);
  --space-inset-150: var(--space-150);
  --space-inset-200: var(--space-200);
  --space-inset-300: var(--space-300);
  --space-inset-400: var(--space-400);
  --space-inset-none: var(--space-000);
  --space-inset-050: var(--space-050);
  --space-inset-075: var(--space-075);

  /* Motion Tokens */
  /* Duration Tokens */
  /* Animation timing values in milliseconds */
  
  --duration-150: 150ms;
  --duration-250: 250ms;
  --duration-350: 350ms;
  
  /* Easing Tokens */
  /* Animation curve definitions */
  
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --easing-glide-decelerate: linear(0, 0.012 0.9%, 0.05 2.0%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
  
  /* Scale Tokens */
  /* Transform scale factors (unitless) */
  /* When applying to base values, use Math.round() for whole pixels */
  
  --scale-088: 0.88;
  --scale-092: 0.92;
  --scale-096: 0.96;
  --scale-100: 1;
  --scale-104: 1.04;
  --scale-108: 1.08;
  
  /* Semantic Motion Tokens */
  /* Composed motion styles for specific animation contexts */
  
  --motion-float-label-duration: var(--duration-250);
  --motion-float-label-easing: var(--easing-standard);
  
  --motion-focus-transition-duration: var(--duration-150);
  --motion-focus-transition-easing: var(--easing-standard);
  
  --motion-button-press-duration: var(--duration-150);
  --motion-button-press-easing: var(--easing-accelerate);
  
  --motion-modal-slide-duration: var(--duration-350);
  --motion-modal-slide-easing: var(--easing-decelerate);
  
  --motion-selection-transition-duration: var(--duration-250);
  --motion-selection-transition-easing: var(--easing-standard);
  
  --motion-settle-transition-duration: var(--duration-350);
  --motion-settle-transition-easing: var(--easing-decelerate);
  

  /* Layering Tokens (Z-Index) */
  --z-index-container: 100;
  --z-index-navigation: 200;
  --z-index-dropdown: 300;
  --z-index-modal: 400;
  --z-index-toast: 500;
  --z-index-tooltip: 600;
}

/* WCAG Theme: Semantic token overrides from theme files (Spec 080 Phase 2) */
:root[data-theme="wcag"] {
  --color-feedback-info-text: oklch(0.4 0.183 310);
  --color-feedback-info-background: oklch(0.93 0.046 310);
  --color-feedback-info-border: oklch(0.4 0.183 310);
  --color-action-primary: oklch(0.52 0.08 209);
  --color-action-navigation: light-dark(oklch(0.28 0.045 209), oklch(0.92 0.035 209));
  --color-contrast-on-action: oklch(1 0 260);
  --color-background-primary-subtle: light-dark(oklch(0.92 0.035 209), oklch(0.28 0.045 209));
}