/* css/tokens.css - Stitch Design System Tokens */
:root {
  /* Color Palette - Derived from Stitch Material 3 Theme */
  --color-primary: #8a1a86;
  --color-primary-container: #8a1a86;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #ffa2f1;
  --color-primary-fixed: #ffd7f4;
  --color-primary-fixed-dim: #ffabf1;
  --color-on-primary-fixed: #380037;
  --color-on-primary-fixed-variant: #7f0a7c;

  --color-secondary: #625c68;
  --color-secondary-container: #e8dfee;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #68626e;
  --color-secondary-fixed: #e8dfee;
  --color-secondary-fixed-dim: #ccc3d2;
  --color-on-secondary-fixed: #1e1a24;
  --color-on-secondary-fixed-variant: #4a4550;

  --color-tertiary: #621168;
  --color-tertiary-container: #7d2d81;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #fea0fc;
  --color-tertiary-fixed: #ffd6f9;
  --color-tertiary-fixed-dim: #ffa9fc;
  --color-on-tertiary-fixed: #37003b;
  --color-on-tertiary-fixed-variant: #732378;

  --color-surface: #fbf8ff;
  --color-surface-dim: #dbd9e1;
  --color-surface-bright: #fbf8ff;
  --color-surface-variant: #e4e1ea;
  --color-surface-tint: #9c2e97;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f2fb;
  --color-surface-container: #efecf5;
  --color-surface-container-high: #eae7ef;
  --color-surface-container-highest: #e4e1ea;
  --color-background: #fbf8ff;

  --color-on-surface: #1b1b21;
  --color-on-surface-variant: #52424e;
  --color-on-background: #1b1b21;
  --color-inverse-surface: #303036;
  --color-inverse-on-surface: #f2eff8;
  --color-inverse-primary: #ffabf1;

  --color-outline: #84727f;
  --color-outline-variant: #d6c0cf;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Typography */
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  --gutter: 1.5rem;     /* 24px */
  --gutter-lg: 2rem;    /* 32px */
  --margin: 1.25rem;    /* 20px */
  --margin-md: 3rem;    /* 48px */
  --margin-lg: 6rem;    /* 96px */

  /* Border Radii */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem;  /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem;    /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-3xl: 2rem;   /* 32px */
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px -2px rgba(30, 30, 36, 0.06);
  --shadow-md: 0 10px 30px -4px rgba(138, 26, 134, 0.06), 0 4px 12px -2px rgba(30, 30, 36, 0.03);
  --shadow-lg: 0 18px 40px -6px rgba(138, 26, 134, 0.12), 0 8px 20px -3px rgba(30, 30, 36, 0.05);
  --shadow-xl: 0 24px 50px -8px rgba(30, 30, 36, 0.15);

  /* Safe Area Variables for Mobile Web App Shell */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}