@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Gugi&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-brand-primary:       #ff7831;
  --color-brand-primary-light: #f39949;
  --color-brand-primary-dark:  #ca5a2e;

  --color-light-bg-primary:   #fdf8ef;
  --color-light-bg-secondary: #f5edda;
  --color-light-bg-tertiary:  #ede0c4;
  --color-light-fg-primary:   #3a2802;
  --color-light-fg-secondary: #6b4c1e;
  --color-light-fg-tertiary:  #9a7040;
  --color-light-fg-muted:     #b89060;
  --color-light-border:       #e8d5b0;
  --color-light-border-strong:#d4bc90;

  --color-dark-bg-primary:    #202215;
  --color-dark-bg-secondary:  #2e2008;
  --color-dark-bg-tertiary:   #3a2802;
  --color-dark-fg-primary:    #f5edda;
  --color-dark-fg-secondary:  #dfd785;
  --color-dark-fg-tertiary:   #b89060;
  --color-dark-fg-muted:      #7a5c30;
  --color-dark-border:        #3f3010;
  --color-dark-border-strong: #5a4020;

  --color-success: #5a8a3c;
  --color-warning: #ebc275;
  --color-error:   #963c3c;
  --color-info:    #4a7fa0;

  --font-display: "Gugi", system-ui, sans-serif;
  --font-heading: "StackSansNotch", "Exo 2", system-ui, sans-serif;
  --font-sans: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Menlo", "Monaco", "Courier New", monospace;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-fast: 100ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;
}

:root:not(.dark) {
  color-scheme: light;
  --bg-primary: var(--color-light-bg-primary);
  --bg-secondary: var(--color-light-bg-secondary);
  --bg-tertiary: var(--color-light-bg-tertiary);
  --fg-primary: var(--color-light-fg-primary);
  --fg-secondary: var(--color-light-fg-secondary);
  --fg-tertiary: var(--color-light-fg-tertiary);
  --fg-muted: var(--color-light-fg-muted);
  --border: var(--color-light-border);
  --border-strong: var(--color-light-border-strong);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
}

:root.dark {
  color-scheme: dark;
  --bg-primary: var(--color-dark-bg-primary);
  --bg-secondary: var(--color-dark-bg-secondary);
  --bg-tertiary: var(--color-dark-bg-tertiary);
  --fg-primary: var(--color-dark-fg-primary);
  --fg-secondary: var(--color-dark-fg-secondary);
  --fg-tertiary: var(--color-dark-fg-tertiary);
  --fg-muted: var(--color-dark-fg-muted);
  --border: var(--color-dark-border);
  --border-strong: var(--color-dark-border-strong);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.50);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.60);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  min-height: 100vh;
}

*:not(svg, path, circle, line, polyline, polygon, rect, text) {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --bg-primary: var(--color-dark-bg-primary);
    --bg-secondary: var(--color-dark-bg-secondary);
    --bg-tertiary: var(--color-dark-bg-tertiary);
    --fg-primary: var(--color-dark-fg-primary);
    --fg-secondary: var(--color-dark-fg-secondary);
    --fg-tertiary: var(--color-dark-fg-tertiary);
    --fg-muted: var(--color-dark-fg-muted);
    --border: var(--color-dark-border);
    --border-strong: var(--color-dark-border-strong);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.50);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.60);
  }
}