:root {
  /* Primary color scale */
  --color-primary-50: #fdf8f3;
  --color-primary-100: #f9ecd9;
  --color-primary-200: #f2d6b3;
  --color-primary-300: #eab985;
  --color-primary-400: #de9750;
  --color-primary-500: #d47a32;
  --color-primary-600: #c56026;
  --color-primary-700: #a44922;
  --color-primary-800: #843b20;
  --color-primary-900: #6a321d;
  --color-primary-950: #3a180d;

  /* Secondary color scale */
  --color-secondary-50: #f5f8f5;
  --color-secondary-100: #e6ede6;
  --color-secondary-200: #ceddcc;
  --color-secondary-300: #b4c8b2;
  --color-secondary-400: #8ca88e;
  --color-secondary-500: #769679;
  --color-secondary-600: #628366;
  --color-secondary-700: #516c55;
  --color-secondary-800: #425646;
  --color-secondary-900: #36463a;
  --color-secondary-950: #1d261f;

  /* Accent color scale */
  --color-accent-50: #fdf9ef;
  --color-accent-100: #f8efcf;
  --color-accent-200: #f1df9f;
  --color-accent-300: #e8cd7f;
  --color-accent-400: #d7b565;
  --color-accent-500: #c49f48;
  --color-accent-600: #ad8838;
  --color-accent-700: #8f6f2f;
  --color-accent-800: #735a28;
  --color-accent-900: #5f4a23;
  --color-accent-950: #332811;

  /* Neutral color scale */
  --color-neutral-50: #faf9f7;
  --color-neutral-100: #f4f2ee;
  --color-neutral-200: #e8e5df;
  --color-neutral-300: #d6d1c9;
  --color-neutral-400: #b5b0a6;
  --color-neutral-500: #908a80;
  --color-neutral-600: #706b62;
  --color-neutral-700: #545048;
  --color-neutral-800: #3b3832;
  --color-neutral-900: #262420;
  --color-neutral-950: #171512;

  /* Success semantic scale */
  --color-success-50: #f2f7f1;
  --color-success-100: #e5eee3;
  --color-success-200: #cadcca;
  --color-success-300: #a8c3a3;
  --color-success-400: #6e9365;
  --color-success-500: #5f8257;
  --color-success-600: #507049;
  --color-success-700: #425c3d;
  --color-success-800: #364b32;
  --color-success-900: #2d3d2a;
  --color-success-950: #181f15;
  --color-success-base: var(--color-success-400);
  --color-success-light: #eef4ec;
  --color-success-dark: #4f6f47;
  --color-success-border: #b9cbb3;

  /* Warning semantic scale */
  --color-warning-50: #fdf5ea;
  --color-warning-100: #faead2;
  --color-warning-200: #f3d2a3;
  --color-warning-300: #eab676;
  --color-warning-400: #d99b41;
  --color-warning-500: #c28530;
  --color-warning-600: #aa7128;
  --color-warning-700: #8c5c23;
  --color-warning-800: #724b1f;
  --color-warning-900: #5e3f1c;
  --color-warning-950: #33210f;
  --color-warning-base: var(--color-warning-400);
  --color-warning-light: #fdf4e8;
  --color-warning-dark: #9f6d22;
  --color-warning-border: #e8c188;

  /* Error semantic scale */
  --color-error-50: #fcf0ef;
  --color-error-100: #f9dfdc;
  --color-error-200: #f1bfb9;
  --color-error-300: #e3a8a2;
  --color-error-400: #d46d62;
  --color-error-500: #c4554b;
  --color-error-600: #ac433a;
  --color-error-700: #8f362f;
  --color-error-800: #742f29;
  --color-error-900: #5f2b27;
  --color-error-950: #331312;
  --color-error-base: var(--color-error-500);
  --color-error-light: #fcf0ef;
  --color-error-dark: #8f2d25;
  --color-error-border: var(--color-error-300);

  /* Info semantic scale */
  --color-info-50: #eff4f7;
  --color-info-100: #dce8ee;
  --color-info-200: #bed3de;
  --color-info-300: #a9c2cf;
  --color-info-400: #97b8c9;
  --color-info-500: #688fa3;
  --color-info-600: #557d92;
  --color-info-700: #486d80;
  --color-info-800: #3e6578;
  --color-info-900: #2f404a;
  --color-info-950: #1b252c;
  --color-info-base: var(--color-info-500);
  --color-info-light: #eef4f7;
  --color-info-dark: #3e6578;
  --color-info-border: var(--color-info-300);

  /* Surface aliases */
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-50);
  --color-bg-elevated: var(--color-neutral-100);
  --color-border-default: var(--color-neutral-200);
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-500);

  /* Typography */
  --font-heading: Lora, Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --line-xs: 1rem;
  --line-sm: 1.25rem;
  --line-base: 1.5rem;
  --line-lg: 1.75rem;
  --line-xl: 1.75rem;
  --line-2xl: 2rem;
  --line-3xl: 2.25rem;
  --line-4xl: 2.5rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(38, 36, 32, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(38, 36, 32, 0.08),
    0 2px 4px -2px rgba(38, 36, 32, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(38, 36, 32, 0.08),
    0 4px 6px -4px rgba(38, 36, 32, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(38, 36, 32, 0.1),
    0 8px 10px -6px rgba(38, 36, 32, 0.04);

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary-400: #cc8c4b;
    --color-secondary-400: #7a967c;

    --color-neutral-50: #1e1c1a;
    --color-neutral-100: #282522;
    --color-neutral-200: #332f2b;
    --color-neutral-300: #3e3a35;
    --color-neutral-400: #b5b0a6;
    --color-neutral-500: #908a80;
    --color-neutral-600: #706b62;
    --color-neutral-700: #545048;
    --color-neutral-800: #f4f2ee;
    --color-neutral-900: #f4f2ee;
    --color-neutral-950: #f4f2ee;

    --color-bg-page: #1e1c1a;
    --color-bg-surface: #282522;
    --color-bg-elevated: #332f2b;
    --color-border-default: #3e3a35;
    --color-text-primary: #f4f2ee;
    --color-text-secondary: #b5b0a6;
    --color-text-disabled: #706b62;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}

html.dark {
  --color-primary-400: #cc8c4b;
  --color-secondary-400: #7a967c;

  --color-neutral-50: #1e1c1a;
  --color-neutral-100: #282522;
  --color-neutral-200: #332f2b;
  --color-neutral-300: #3e3a35;
  --color-neutral-400: #b5b0a6;
  --color-neutral-500: #908a80;
  --color-neutral-600: #706b62;
  --color-neutral-700: #545048;
  --color-neutral-800: #f4f2ee;
  --color-neutral-900: #f4f2ee;
  --color-neutral-950: #f4f2ee;

  --color-bg-page: #1e1c1a;
  --color-bg-surface: #282522;
  --color-bg-elevated: #332f2b;
  --color-border-default: #3e3a35;
  --color-text-primary: #f4f2ee;
  --color-text-secondary: #b5b0a6;
  --color-text-disabled: #706b62;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}