/* =========================================================================
   Simple Roots — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow.
   Import this file before any page styles:  @import url('styles/tokens.css');
   Documented in DESIGN.md. Never hardcode these values in a page.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------------
       1. RAW PALETTE — brand colours. Don't reference these in components;
          use the semantic tokens below so themes stay swappable.
       --------------------------------------------------------------------- */
    --color-white: #FFFFFF;
    --color-cream: #F7EFD8;
    --color-orange: #FAA722;
    --color-brown: #694637;
    --color-green: #3D8637;
    --color-green-dark: #2F6B2A;   /* hover/darker green */
    --color-blue: #384AD3;
    --color-light-grey: #E8EAED;
    --color-grey: #C7D3D5;
    --color-red: #B21E2E;
    --color-dark: #302C29;
    --color-tan: #C2B2A3;
    --color-navy: #131946;
    --color-black: #000000;

    /* ---------------------------------------------------------------------
       2. SEMANTIC COLOURS — the public API. Use THESE in components.
       --------------------------------------------------------------------- */
    --color-primary: var(--color-green);        /* CTAs, primary brand, links */
    --color-primary-hover: var(--color-green-dark);
    --color-secondary: var(--color-brown);      /* secondary text/buttons */
    --color-accent: var(--color-orange);        /* highlights */
    --color-bg: var(--color-white);             /* page background */
    --color-bg-alt: var(--color-cream);         /* accent section background */
    --color-bg-invert: var(--color-green);      /* dark/green section background */
    --color-text: var(--color-dark);            /* body text (never pure black) */
    --color-text-muted: var(--color-tan);       /* secondary/muted text */
    --color-text-invert: var(--color-white);    /* text on dark/green bg */
    --color-border: var(--color-light-grey);    /* hairlines, dividers */
    --color-error: var(--color-red);
    --color-success: var(--color-green);
    --color-whatsapp:     #25D366;                 /* WhatsApp brand green */
    --color-warning-bg:   var(--color-bg-alt);     /* cream — warning box background */
    --color-warning:      var(--color-accent);     /* orange — warning accent/border */
    --color-warning-text: var(--color-secondary);  /* brown — warning box text */

    /* ---------------------------------------------------------------------
       3. TYPOGRAPHY
       Real licensed names kept FIRST so a future font license is a drop-in;
       free Google-Fonts alternates (Nunito Sans ≈ Avenir, Jost ≈ Futura)
       are the actual rendered fallbacks today.
       --------------------------------------------------------------------- */
    --font-heading: 'Avenir', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-heading-light: 'Avenir', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Futura', 'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
    /* Legacy alias — kept so un-migrated rules keep working; remove at end. */
    --font-family: var(--font-body);

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    /* Line heights */
    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-snug: 1.4;
    --lh-body: 1.6;

    /* Fluid type scale (mobile → desktop). Base 16px = 1rem.
       Seeded from Wix computed sizes: hero 49, section 39, card 21.6, body 20. */
    --fs-display: clamp(2rem, 1.2rem + 3.4vw, 3.0625rem);   /* 32 → 49  hero */
    --fs-h1:      clamp(1.75rem, 1.3rem + 1.9vw, 2.425rem); /* 28 → 38.8 section */
    --fs-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2rem);     /* 24 → 32  sub-section */
    --fs-h3:      clamp(1.125rem, 1rem + 0.55vw, 1.35rem);  /* 18 → 21.6 card title */
    --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.25rem);   /* 16 → 20  paragraph */
    --fs-small:   0.875rem;                                 /* 14  small/meta */
    --fs-caption: 0.8125rem;                                /* 13  captions */

    /* ---------------------------------------------------------------------
       4. SPACING — 4px base scale. Use for padding / margin / gap.
       --------------------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4  */
    --space-2: 0.5rem;    /* 8  */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */
    --space-9: 6rem;      /* 96 */

    /* Section rhythm + container widths */
    --section-pad-y: clamp(2rem, 1.2rem + 3.5vw, 4rem);
    --section-pad-x: clamp(1rem, 0.5rem + 3vw, 4rem);
    --container-max: 1300px;   /* standard content width  */
    --hero-max: 1600px;        /* full-bleed hero cap (Wix) */

    /* ---------------------------------------------------------------------
       5. BORDER RADIUS
       --------------------------------------------------------------------- */
    --radius-sm: 4px;     /* buttons, inputs */
    --radius-md: 8px;     /* small cards */
    --radius-lg: 12px;    /* cards, media */
    --radius-pill: 999px; /* pills/badges */
    --radius-circle: 50%; /* avatars */

    /* ---------------------------------------------------------------------
       6. SHADOWS
       --------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(48, 44, 41, 0.08);
    --shadow-md: 0 4px 12px rgba(48, 44, 41, 0.10);
    --shadow-lg: 0 10px 30px rgba(48, 44, 41, 0.12);
    --shadow-card: 0 6px 20px rgba(48, 44, 41, 0.10);

    /* ---------------------------------------------------------------------
       7. BREAKPOINTS (reference only — CSS can't use vars in @media).
          Mobile  : ≤ 750px   (base styles, no media query)
          Tablet  : ≥ 751px   @media (min-width: 751px)
          Desktop : ≥ 1041px  @media (min-width: 1041px)
       --------------------------------------------------------------------- */
    --bp-tablet: 751px;
    --bp-desktop: 1041px;

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}