/* PSYCHIZEN DESIGN TOKENS */
:root {
  /* Brand Color Palette */
  --color-primary: #174C46;        /* Deep Forest Teal */
  --color-primary-dark: #103A36;   /* Darker Forest Teal for hover */
  --color-primary-light: #20625B;  /* Medium Teal */
  --color-sage: #DCEBE2;           /* Soft Sage Green */
  --color-sage-light: #EEF5F1;     /* Very Light Sage */
  --color-warm-cream: #FAF7F0;     /* Warm Cream Background */
  --color-pure-white: #FFFFFF;     /* Pure White Surfaces */
  --color-lavender: #EEE9FA;       /* Soft Lavender Reflection */
  --color-lavender-dark: #7058A6;  /* Deep Lavender Accent */
  --color-peach: #F6E3D7;          /* Soft Peach Warmth */
  --color-peach-dark: #B8673E;     /* Deep Peach Accent */

  /* Text & Border Colors */
  --color-text-main: #202B29;      /* Headings & Body */
  --color-text-muted: #65716E;     /* Supporting Text */
  --color-text-light: #8E9B98;     /* Inactive / Placeholder */
  --color-border: #E3E8E4;         /* Subtle Dividers & Card Borders */
  --color-border-hover: #CAD4CD;   /* Active Border */

  /* Semantic State Colors */
  --color-success: #237A52;
  --color-success-bg: #EAF5EF;
  --color-warning: #946200;
  --color-warning-bg: #FEF7E6;
  --color-error: #B42318;
  --color-error-bg: #FEE4E2;
  --color-info: #0E6290;
  --color-info-bg: #E0F2FE;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing (8-point grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(23, 76, 70, 0.05);
  --shadow-md: 0 4px 20px -2px rgba(23, 76, 70, 0.07), 0 2px 6px -1px rgba(23, 76, 70, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(23, 76, 70, 0.1), 0 4px 12px -2px rgba(23, 76, 70, 0.05);
  --shadow-floating: 0 20px 48px -8px rgba(23, 76, 70, 0.16);

  /* Layout Widths */
  --container-max: 1280px;
  --reading-max: 760px;
  --header-height: 76px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}