/* Design token definitions — colors, typography, spacing, shadows */

@layer tokens {
  :root {
    --color-primary: #1B4D3E;
    --color-accent: #996B1D;
    --color-primary-dark: color-mix(
      in srgb,
      var(--color-primary) 80%,
      black
    );
    --color-primary-light: color-mix(
      in srgb,
      var(--color-primary) 12%,
      white
    );
    --color-text: #1a1a2e;
    --color-text-light: #555;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f7f5;
    --color-border: #e0ddd8;
    --color-dark: #1a1a2e;
    --color-dark-light: #2a2a3e;
    --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-body:
      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}