/* ===================================
   Design Tokens — Koee Landing Page
   Warm Editorial Palette
   =================================== */

/* Cabinet Grotesk — Self-hosted */
@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('/assets/fonts/CabinetGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('/assets/fonts/CabinetGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('/assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('/assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

:root {
    /* ---- Colors: Warm Editorial ---- */

    /* Cream (backgrounds) */
    --color-cream: #F5F3ED;
    --color-cream-light: #FAF9F5;
    --color-cream-dark: #ECE9E0;

    /* Charcoal (text, dark sections — teal-tinted) */
    --color-charcoal: #242E30;
    --color-charcoal-light: #3D4A4D;
    --color-charcoal-muted: #5F6E71;

    /* Teal (primary accent) */
    --color-teal: #0891B2;
    --color-teal-light: #06B6D4;
    --color-teal-dark: #0E7490;
    --color-teal-bg: rgba(8, 145, 178, 0.08);

    /* Amber (highlights) */
    --color-amber: #D97706;
    --color-amber-bg: rgba(217, 119, 6, 0.08);

    /* Danger (loss / error) */
    --color-danger: #DC2626;
    --color-danger-bg: rgba(220, 38, 38, 0.08);

    /* Warm neutral scale */
    --neutral-50: #FAFAF7;
    --neutral-100: #F5F5F0;
    --neutral-200: #E8E8E0;
    --neutral-300: #D4D4CB;
    --neutral-400: #A8A89E;
    --neutral-500: #7A7A71;
    --neutral-600: #5C5C54;
    --neutral-700: #3A4547;
    --neutral-800: #242E30;
    --neutral-900: #161D1F;

    /* Semantic */
    --color-bg: var(--color-cream);
    --color-surface: var(--color-cream-light);
    --color-border: var(--color-cream-dark);
    --color-text: var(--color-charcoal);
    --color-text-secondary: var(--color-charcoal-light);
    --color-text-muted: var(--color-charcoal-muted);
    --color-accent: var(--color-teal);
    --color-accent-hover: var(--color-teal-light);
    --white: #FFFFFF;

    /* ---- Typography ---- */
    --font-display: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type scale */
    --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);     /* 12-13px */
    --text-sm: clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);     /* 13-14px */
    --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15-16px */
    --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);         /* 16-18px */
    --text-xl: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);      /* 18-20px */
    --text-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);      /* 22-26px */
    --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);          /* 28-36px */
    --text-4xl: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);           /* 36-48px */
    --text-5xl: clamp(2.75rem, 2rem + 3vw, 4rem);               /* 44-64px */

    /* Tracking */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* Leading */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ---- Spacing ---- */
    --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 */
    --space-32: 8rem;      /* 128px */

    /* Container */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-padding: clamp(1rem, 0.5rem + 2vw, 1.5rem);

    /* Section padding */
    --section-padding: clamp(3rem, 2rem + 4vw, 5rem);

    /* ---- Shadows (warm-tinted) ---- */
    --shadow-sm: 0 1px 2px rgba(44, 46, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(44, 46, 42, 0.06);
    --shadow-lg: 0 4px 16px rgba(44, 46, 42, 0.08);
    --shadow-xl: 0 8px 32px rgba(44, 46, 42, 0.12);

    /* ---- Borders ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ---- Timing ---- */
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.7s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --stagger-step: 0.1s;

    /* ---- Z-index ---- */
    --z-header: 1000;
    --z-mobile-menu: 999;
    --z-overlay: 900;
}