:root {
  --color-primary: #FA7F00;
  --color-accent: #FF9F40;
  --color-secondary: #C6C6C6;
  --color-bg: #FAFAF9;
  --color-surface: color-mix(in srgb, var(--color-bg), black 20%);
  --color-text: #121212;
  --color-text-muted: #525252;

  /* Typography */
  --font-family-primary: 'Oxanium', system-ui, -apple-system, sans-serif;

  /* Orange-tinted shadow system */
  --shadow-sm: 0 2px 8px rgba(250, 127, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(250, 127, 0, 0.04);
  --shadow-lg: 0 2px 8px rgba(250, 127, 0, 0.08),
  0 8px 24px rgba(250, 127, 0, 0.04),
  inset 0 -1px 0 rgba(250, 127, 0, 0.1);
  --shadow-inset: inset 0 -1px 0 rgba(250, 127, 0, 0.1);

  /* Noise texture system */
  --noise-opacity: 0.04;
  --noise-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

/* dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #E0E0E0;
    --color-surface: color-mix(in srgb, var(--color-bg), white 20%);
    --color-text-muted: #a8a39e;
  }
}

/* Manual theme override */
[data-theme="dark"] {
  --color-bg: #121212;
  --color-text: #E0E0E0;
  --color-surface: color-mix(in srgb, var(--color-bg), white 20%);
  --color-text-muted: #a8a39e;
}
[data-theme="light"] {
  --color-bg: #FAFAF9;
  --color-text: #121212;
  --color-surface: color-mix(in srgb, var(--color-bg), black 20%);
  --color-text-muted: #525252;
}