/* ============================================================
   DESIGN TOKENS — Cascade
   Edit values here; changes cascade everywhere automatically.
   ============================================================ */

/* ── Custom Fonts ──────────────────────────────────────────── */
@font-face {
    font-family: 'HedvigLettersSerif';
    src: url('/fonts/hedvig/HedvigLettersSerif-Regular-VariableFont_opsz.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('/fonts/switzer/fonts/Switzer-Variable.woff2') format('woff2'),
        url('/fonts/switzer/fonts/Switzer-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer Variable';
    src: url('/fonts/switzer/fonts/Switzer-Variable.woff2') format('woff2'),
        url('/fonts/switzer/fonts/Switzer-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dmsans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TheQueenMarker';
    src: url('/fonts/the-queen-marker.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {

    /* ── Base colour tokens (editable via token editor) ─────── */
    --color-black: #0b0b0b;
    --color-white: #ffffff;
    --color-cream: #f3efe6;
    --color-gray-light: #ebe6db;
    --color-gray-dark: #3c3634;
    --color-green: #9fff6c;
    --color-green-dark: #72d43d;
    --color-purple-light: #cabdff;
    --color-purple-hover: #9584dc;
    --color-yellow-light: #eee3a6;
    --color-purple-card: #bcaef2;
    --color-terracotta-dark: #693a28;
    --color-terracotta-light: #cd6f4e;

    /* ── Derived colour tokens (auto-computed from base) ────── */
    --border: rgba(11, 11, 11, 0.12);
    --color-yellow-body: #f2e9b4;
    --color-nav-bg: rgba(243, 239, 230, 0.92);
    --color-nav-cta-bg: #e9e4dc;
    --color-cta-bg: #443e39;
    --color-cta-bg-focus: #4a4540;
    --color-cta-border: #d1c2a1;
    --color-cta-border-focus: #e5d8c0;
    --color-cta-placeholder: #a19b95;
    --color-cta-btn-bg: #f0e6cb;
    --color-cta-btn-bg-hover: #f5edda;
    --color-cta-btn-text: #302b27;
    --color-integrations-bg: #774c3b;
    --color-integrations-accent: #d1c2a1;
    --color-integrations-text: rgba(250, 249, 228, 0.9);
    --color-integrations-text-muted: rgba(250, 249, 228, 0.65);
    --color-integrations-text-dim: rgba(250, 249, 228, 0.55);
    --color-integrations-text-body: rgba(250, 249, 228, 0.85);
    --color-integrations-border: rgba(250, 249, 228, 0.08);
    --color-integrations-border-section: rgba(250, 249, 228, 0.1);
    --color-cta-disclaimer: rgba(245, 240, 230, 0.8);
    --color-team-terracotta: #cd6f4e;
    --color-team-purple: #cabdff;
    --color-badge-green: #3d6b00;
    --color-badge-yellow: #7a6d00;

    /* ── Demo (product visual) tokens ────────────────────────── */
    --demo-bg: #f3efe6;
    --demo-card: #ebe6db;
    --demo-cream: #f0ebe1;
    --demo-cream-light: #f7f4ee;
    --demo-black: #0b0b0b;
    --demo-charcoal: #3c3634;
    --demo-gray: #8a817a;
    --demo-lavender: #cabdff;
    --demo-lavender-light: #ddd4f5;
    --demo-lavender-pale: #eeeaf8;
    --demo-green: #9fff6c;
    --demo-green-muted: #72d43d;
    --demo-yellow: #ede5a0;
    --demo-yellow-light: #f5f0c8;
    --demo-coral: #cd6f4e;
    --demo-white: #f9f6ef;
    --demo-toolbar-bg: #ebe6db;

    /* Font mono */
    --font-mono: 'DM Mono', monospace;

    /* ── Typography ──────────────────────────────────────────── */
    --font-serif: 'HedvigLettersSerif', Georgia, serif;
    --font-sans: 'Switzer', 'DM Sans', system-ui, sans-serif;
    --font-marker: 'TheQueenMarker', cursive;

    /* Scale */
    --text-hero: 5rem;
    /* 80px — h1 */
    --text-large: 1.125rem;
    /* 18px */
    --text-base: 1rem;
    /* 16px */
    --text-small: 1rem;
    /* 14px */
    --text-marker: 4.5rem;
    /* 72px — PEOPLE */
    --text-backed: 0.6875rem;
    /* 11px */

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Leading */
    --leading-hero: 115%;
    --leading-normal: 1.5;
    --leading-tight: 1.2;

    /* Tracking */
    --tracking-hero: -0.2rem;
    --tracking-tight: -0.02em;
    --tracking-marker: 0.02em;

    /* ── Spacing (4-pt scale, all rem) ───────────────────────── */
    --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 */
    --space-40: 10rem;
    /* 160px */

    /* ── Layout ──────────────────────────────────────────────── */
    --section-padding-v: var(--space-20);

    /* ── Radii ───────────────────────────────────────────────── */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing-only (use inside animation shorthand) */
    --easing-slow: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index ─────────────────────────────────────────────── */
    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-overlay: 100;

}

@media (max-width: 767px) {
    :root {
    --text-large: 1rem;
    /* 18px */
    --text-base: 0.875rem;
    /* 16px */
    --text-small: 0.75rem;
    }
}