/* ==========================================================================
   Test to Table — Design Tokens
   Based on Clay design system (DESIGN.md)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
    /* --- Brand Colors (Customized from DESIGN.md Section 9) --- */
    --color-primary: #fbbd41;
    --color-primary-dark: #ffaa00;
    --color-primary-light: #fad68f;
    --color-text: #02492a;
    --color-text-secondary: #7c766a;
    --color-text-light: #ffffff;
    --color-bg: #faf9f7;
    --color-bg-subtle: #f3f2f2;
    --color-border: #e2e1df;
    --color-success: #2e9e5d;
    --color-warning: #eca413;
    --color-danger: #d92626;
    --color-info: #2d7fd2;

    /* --- Swatch Palette --- */
    --swatch-matcha-300: #84e7a5;
    --swatch-matcha-600: #078a52;
    --swatch-matcha-800: #02492a;
    --swatch-slushie-500: #3bd3fd;
    --swatch-slushie-800: #0089ad;
    --swatch-lemon-400: #f8cc65;
    --swatch-lemon-500: #fbbd41;
    --swatch-lemon-700: #d08a11;
    --swatch-lemon-800: #9d6a09;
    --swatch-ube-300: #c1b0ff;
    --swatch-ube-800: #43089f;
    --swatch-pomegranate-400: #fc7981;
    --swatch-blueberry-800: #01418d;

    /* --- Neutrals (Warm) --- */
    --color-warm-silver: #9f9b93;
    --color-warm-charcoal: #55534e;
    --color-dark-charcoal: #333333;

    /* --- Surfaces & Borders --- */
    --color-surface: #ffffff;
    --color-oat-border: #dad4c8;
    --color-oat-light: #eee9df;

    /* --- Spacing (8-point grid) --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;

    /* --- Typography --- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: clamp(2.5rem, 6vw, 4rem);

    /* --- Border Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-base: 12px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 50px;

    /* --- Shadows --- */
    --shadow-clay: rgba(0,0,0,0.1) 0px 1px 1px,
                   rgba(0,0,0,0.04) 0px -1px 1px inset,
                   rgba(0,0,0,0.05) 0px -0.5px 1px;
    --shadow-button: 0 4px 0 var(--color-primary-dark);
    --shadow-button-hover: 0 6px 0 var(--color-primary-dark);
    --shadow-button-active: 0 1px 0 var(--color-primary-dark);

    /* --- Transitions --- */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}