/* Theme Variables */
:root {
  color-scheme: light;
  
  /* Zen-inspired colors */
  --zen-paper: var(--stone-0);
  --zen-dark: var(--stone-11);
  --zen-muted: rgba(0, 0, 0, .05);
  --zen-subtle: rgba(0, 0, 0, .05);

  
  /* Text colors */
  --text-1: var(--zen-dark);
  --text-2: rgba(46, 46, 46, .8);
  
  /* Brand colors */
  --brand-primary: #c94a33;  /* Light mode brand color */
  --brand-primary-hover: #b43e28;  /* Darker on hover */
  
  /* Accent colors - using brand primary */
  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-hover);
  
  /* Button colors */
  --button-bg: var(--brand-primary);
  --button-text: white;

  /* Avatar/Tag Colors */
  --rust-red: 175 46 27;
  --on-rust-red: 255 255 255;
  
  --burnt-orange: 204 99 36;
  --on-burnt-orange: 255 255 255;
  
  --slate-blue: 59 75 89;
  --on-slate-blue: 255 255 255;
  
  --warm-taupe: 191 160 122;
  --on-warm-taupe: 0 0 0;
  
  --vivid-orange: 237 128 8;
  --on-vivid-orange: 0 0 0;
  
  --coral-red: 237 63 28;
  --on-coral-red: 255 255 255;
  
  --crimson: 191 27 27;
  --on-crimson: 255 255 255;
  
  --olive-drab: 115 107 30;
  --on-olive-drab: 255 255 255;
  
  --terra-cotta: 208 123 83;
  --on-terra-cotta: 0 0 0;
  
  --taupe: 115 99 86;
  --on-taupe: 255 255 255;
  
  --cardinal-red: 173 29 29;
  --on-cardinal-red: 255 255 255;
  
  --copper: 191 124 42;
  --on-copper: 255 255 255;
  
  --tan: 192 156 111;
  --on-tan: 0 0 0;
  
  --steel-blue: 105 143 156;
  --on-steel-blue: 0 0 0;
  
  --sage-green: 124 149 107;
  --on-sage-green: 0 0 0;
  
  --dusty-purple: 93 97 143;
  --on-dusty-purple: 255 255 255;
  
  --dark-umber: 59 54 51;
  --on-dark-umber: 255 255 255;
  
  --warm-gray: 103 105 94;
  --on-warm-gray: 255 255 255;

  /* Open Props Colors (using mid-range shades 5-7 for good contrast) */
  --red-op: 255 107 107;  /* red-5 */
  --on-red-op: 0 0 0;
  
  --pink-op: 240 101 149;  /* pink-5 */
  --on-pink-op: 255 255 255;
  
  --purple-op: 204 93 232;  /* purple-5 */
  --on-purple-op: 255 255 255;
  
  --violet-op: 132 94 247;  /* violet-5 */
  --on-violet-op: 255 255 255;
  
  --indigo-op: 92 124 250;  /* indigo-5 */
  --on-indigo-op: 255 255 255;
  
  --blue-op: 51 154 240;  /* blue-5 */
  --on-blue-op: 255 255 255;
  
  --cyan-op: 34 184 207;  /* cyan-5 */
  --on-cyan-op: 0 0 0;
  
  --teal-op: 32 201 151;  /* teal-5 */
  --on-teal-op: 0 0 0;
  
  --green-op: 81 207 102;  /* green-5 */
  --on-green-op: 0 0 0;
  
  --lime-op: 148 216 45;  /* lime-5 */
  --on-lime-op: 0 0 0;
  
  --yellow-op: 252 196 25;  /* yellow-5 */
  --on-yellow-op: 0 0 0;
  
  --orange-op: 255 146 43;  /* orange-5 */
  --on-orange-op: 0 0 0;
  
  --brown-op: 183 143 109;  /* brown-5 */
  --on-brown-op: 0 0 0;
  
  --choco-op: 223 133 69;  /* choco-5 */
  --on-choco-op: 0 0 0;
  
  --sand-op: 154 145 120;  /* sand-5 */
  --on-sand-op: 0 0 0;
  
  --camo-op: 167 168 39;  /* camo-5 */
  --on-camo-op: 255 255 255;
  
  --jungle-op: 168 198 72;  /* jungle-5 */
  --on-jungle-op: 0 0 0;
}

[data-theme="light"] {
  /* Light theme uses default Open Props colors */
  --text-1: var(--stone-10);
  --text-2: var(--stone-8);
  --surface-1: var(--stone-0);
  --surface-2: var(--stone-2);
  --surface-3: var(--stone-4);
  --surface-4: var(--stone-10);
  --on-surface-4: var(--stone-0);
  
  /* Light mode brand colors */
  --brand-primary: #c94a33;
  --brand-primary: #a73b00;
  --brand-primary-hover: #c24d00;
  --brand-tonal: #8f7e72;
  --on-brand-tonal: #ffffff;
  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-hover);
  --button-bg: var(--brand-primary);
  --button-text: white;
}

[data-theme="dark"] {
  /* Dark theme surface colors */
  --text-1: var(--stone-0);
  --text-2: var(--stone-2);
  --surface-1: var(--stone-11);
  --surface-2: var(--stone-10);
  --surface-3: var(--stone-9);
  --surface-4: var(--stone-0);
  --on-surface-4: var(--stone-12);

  /* Dark mode brand colors */
  --brand-primary: #6d28d9;
  --brand-primary: #9f40ff;
  --brand-primary-hover: #b45fff;
  --brand-tonal: #a598a8;
  --on-brand-tonal: #000000;
  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-hover);
  --button-bg: var(--brand-primary);
  --button-text: white;
}