/* css/tokens.css — Design tokens: custom properties */
@layer tokens {
  :root {
    /* --- Cores (Light Mode) --- */
    --color-bg-primary:        hsl(36, 45%, 98%);
    --color-bg-secondary:      hsl(36, 30%, 94%);
    --color-bg-card:           hsl(0, 0%, 100%);
    --color-text-primary:      hsl(24, 20%, 12%);
    --color-text-secondary:    hsl(24, 10%, 35%);
    --color-text-muted:        hsl(24, 10%, 55%);
    --color-accent-sage:       hsl(163, 33%, 27%);
    --color-accent-sage-light: hsl(163, 33%, 94%);
    --color-accent-coral:      hsl(16, 64%, 55%);
    --color-accent-coral-light:hsl(16, 64%, 93%);
    --color-accent-gold:       hsl(39, 65%, 52%);
    --color-border:            hsl(36, 20%, 88%);

    /* --- Tipografia --- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'Outfit', 'Inter', system-ui, sans-serif;

    /* --- Espaçamento (8-point grid) --- */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* --- Border Radius --- */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* --- Sombras --- */
    --shadow-sm: 0 1px 4px rgba(24, 16, 8, 0.06), 0 2px 8px rgba(24, 16, 8, 0.04);
    --shadow-md: 0 4px 12px rgba(24, 16, 8, 0.08), 0 8px 24px rgba(24, 16, 8, 0.06);
    --shadow-lg: 0 8px 24px rgba(24, 16, 8, 0.10), 0 16px 40px rgba(24, 16, 8, 0.10);
    --shadow-xl: 0 16px 40px rgba(24, 16, 8, 0.14), 0 24px 60px rgba(24, 16, 8, 0.12);

    /* --- Layout --- */
    --max-width:     1200px;
    --header-height: 72px;

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
  }

  [data-theme="dark"] {
    --color-bg-primary:        hsl(24, 15%, 9%);
    --color-bg-secondary:      hsl(24, 12%, 14%);
    --color-bg-card:           hsl(24, 12%, 12%);
    --color-text-primary:      hsl(36, 45%, 96%);
    --color-text-secondary:    hsl(36, 20%, 75%);
    --color-text-muted:        hsl(36, 12%, 55%);
    --color-accent-sage:       hsl(163, 28%, 45%);
    --color-accent-sage-light: hsl(163, 28%, 14%);
    --color-accent-coral:      hsl(16, 55%, 58%);
    --color-accent-coral-light:hsl(16, 55%, 14%);
    --color-accent-gold:       hsl(39, 60%, 58%);
    --color-border:            hsl(24, 12%, 22%);

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.30);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.40), 0 24px 60px rgba(0, 0, 0, 0.35);
  }
}