/* tokens.css — Design tokens as CSS Custom Properties */
:root {
    /* Colors */
    --c-bg-primary: #242222;      /* page, header, footer */
    --c-bg-dark: #2b2929;         /* dark cards, sections */
    --c-accent-soft: #ffb375;     /* active buttons, badges */
    --c-white: #f5f1ea;           /* light text on dark */
    --c-text: #a8a19a;            /* body text, menu, descriptions */
    --c-heading: #f7c879;         /* H2, decorative lines, accents */
    --c-btn-text: #211d1f;        /* text inside light buttons */
    --c-border: #c99b5e;          /* secondary button border */
    --c-card-border: #3a3736;     /* subtle internal dividers */

    /* Gradients */
    --grad-cta: linear-gradient(180deg, #ffc07f 0%, #ffa66e 100%);

    /* State */
    --c-focus: #ffc07f;
    --c-danger: #d13438;

    /* Typography */
    --font-base: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --fs-body: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);   /* 14–16px */
    --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);       /* 32–44px */
    --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);      /* 26–32px */
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);     /* 20–24px */
    --lh-base: 1.6;
    --lh-heading: 1.25;

    /* Spacing */
    --sp-section: clamp(2.5rem, 2rem + 2vw, 3.75rem);    /* 40–60px between sections */
    --sp-grid-gap: 1.25rem;                              /* 20px between cards */
    --sp-paragraph: 1.25rem;                             /* 20px between paragraphs */
    --sp-h2-text: 1.25rem;                               /* 20px H2 → text */
    --sp-h3-text: 1rem;                                  /* 16px H3 → text */
    --sp-faq: 0.875rem;                                  /* 14px between FAQ items */
    --sp-card-pad: 1.5rem;                               /* 24px card padding */

    /* Layout */
    --container-max: 1440px;
    --container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Radius / borders / shadow */
    --radius-card: 6px;
    --radius-pill: 999px;
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.28);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition: 0.25s ease;
    --transition-fast: 0.15s ease;

    /* Header height for sticky offsets */
    --header-h: 72px;
}