@import "tailwindcss";

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@theme {
  --color-leaf-50: #F0FDF4;
  --color-leaf-500: #22C55E;
  --color-leaf-600: #16A34A;
  --color-leaf-700: #15803D;

  --color-sand-50: #FAFAF7;
  --color-sand-100: #F4F2EC;
  --color-sand-200: #E8E4D8;
  --color-sand-400: #A8A28E;
  --color-sand-500: #78725F;
  --color-sand-600: #5C5644;
  --color-sand-700: #3F3B30;
  --color-sand-800: #2C291F;
  --color-sand-900: #1A1812;
  --color-sand-950: #0F0E0A;

  --font-sans: var(--font-geist-sans, "Geist", "Inter", system-ui, sans-serif);
  --font-display: var(--font-geist-sans, "Geist", system-ui, sans-serif);
  --font-mono: var(--font-geist-mono, ui-monospace, monospace);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
}

@layer base {
  :root {
    color-scheme: light;
    --brand-accent: #FF6B35;
    --brand-accent-dark: #D9461C;
    --brand-accent-light: #FFB088;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-sand-50);
    scrollbar-gutter: stable;
  }

  body {
    background-color: var(--color-sand-50);
    color: var(--color-sand-900);
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  html[data-theme="dark"] {
    background-color: var(--color-sand-950);
  }

  html[data-theme="dark"] body {
    background-color: var(--color-sand-950);
    color: var(--color-sand-50);
  }

  ::selection {
    background-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  }

  :focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
  }

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