/**
 * tokens.css
 * Single source of truth for all design values.
 *
 * STRUCTURE:
 * 1. @font-face declarations (self-hosted fonts)
 * 2. Level 1: Primitives  — raw values, never used directly in components
 * 3. Level 2: Semantic    — give primitives meaning, used everywhere
 * 4. Level 3: Component   — named one-offs, referenced in component CSS
 *
 * RULES:
 * - No raw values anywhere else in the codebase. Token references only.
 * - To add a client font: declare @font-face here, override
 *   --font-heading / --font-body in child theme client-vars.css.
 * - Child theme overrides Level 1 and Level 2 only.
 *   Component tokens update automatically.
 */

/* ============================================================
   @FONT-FACE
   Self-hosted fonts only. No Google Fonts requests.
   See assets/fonts/README.txt for download instructions.

   Replace this placeholder block with real client fonts.
   Weights: download only what you use (typically 400 + 600 or 700).
============================================================ */

/*
@font-face {
    font-family: 'ClientFont';
    src: url('../fonts/clientfont-400.woff2') format('woff2'),
         url('../fonts/clientfont-400.woff')  format('woff');
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClientFont';
    src: url('../fonts/clientfont-700.woff2') format('woff2'),
         url('../fonts/clientfont-700.woff')  format('woff');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}
*/

:root {

    /* ============================================================
       LEVEL 1 — PRIMITIVES
       Never reference these directly outside of this file.
    ============================================================ */

    /* Colour palette */
    --primitive-brand-200:    #D4B97A;
    --primitive-brand-300:    #C9A84C;
    --primitive-brand-400:    #B8922A;   /* Default brand colour - override in child theme */
    --primitive-brand-500:    #8A6D1F;
    --primitive-accent-400:  #B3261E;   /* Default accent/error colour - override in child theme */
    --primitive-accent-500:  #8C1D18;
    --primitive-dark:        #1A1A1A;
    --primitive-grey-100:    #F2F2F2;
    --primitive-grey-200:    #E0E0E0;
    --primitive-grey-300:    #AAAAAA;
    --primitive-grey-500:    #555555;
    --primitive-grey-700:    #333333;
    --primitive-white:       #FFFFFF;

    /* Type scale */
    --primitive-text-xs:     0.75rem;    /*  12px */
    --primitive-text-sm:     0.875rem;   /*  14px */
    --primitive-text-base:   1rem;       /*  16px */
    --primitive-text-lg:     1.125rem;   /*  18px */
    --primitive-text-xl:     1.25rem;    /*  20px */
    --primitive-text-2xl:    1.5rem;     /*  24px */
    --primitive-text-3xl:    1.875rem;   /*  30px */
    --primitive-text-4xl:    2.25rem;    /*  36px */
    --primitive-text-5xl:    3rem;       /*  48px */

    /* Spacing scale */
    --primitive-space-1:     0.25rem;    /*   4px */
    --primitive-space-2:     0.5rem;     /*   8px */
    --primitive-space-3:     0.75rem;    /*  12px */
    --primitive-space-4:     1rem;       /*  16px */
    --primitive-space-5:     1.25rem;    /*  20px */
    --primitive-space-6:     1.5rem;     /*  24px */
    --primitive-space-8:     2rem;       /*  32px */
    --primitive-space-10:    2.5rem;     /*  40px */
    --primitive-space-12:    3rem;       /*  48px */
    --primitive-space-16:    4rem;       /*  64px */
    --primitive-space-20:    5rem;       /*  80px */
    --primitive-space-24:    6rem;       /*  96px */

    /* Radius */
    --primitive-radius-sm:   4px;
    --primitive-radius-md:   8px;
    --primitive-radius-lg:   16px;
    --primitive-radius-full: 9999px;

    /* Transitions */
    --primitive-duration-fast:   150ms;
    --primitive-duration-base:   250ms;
    --primitive-duration-slow:   400ms;
    --primitive-ease:            ease-in-out;


    /* ============================================================
       LEVEL 2 — SEMANTIC TOKENS
       These are what components reference.
       Override these in child theme client-vars.css.
    ============================================================ */

    /* Brand */
    --color-brand:           var(--primitive-brand-400);
    --color-brand-hover:     var(--primitive-brand-500);
    --color-brand-subtle:    var(--primitive-brand-200);
    --color-brand-muted:     var(--primitive-brand-300);

    /* Text */
    --color-text:            var(--primitive-dark);
    --color-text-muted:      var(--primitive-grey-500);
    --color-text-light:      var(--primitive-grey-300);
    --color-text-inverse:    var(--primitive-white);

    /* Surfaces */
    --color-white:           var(--primitive-white);
    --color-surface:         var(--primitive-white);
    --color-surface-alt:     var(--primitive-grey-100);
    --color-surface-dark:    var(--primitive-dark);

    /* Borders */
    --color-border:          var(--primitive-grey-200);
    --color-border-strong:   var(--primitive-grey-300);

    /* Feedback */
    --color-focus:           var(--primitive-brand-400);
    --color-accent:          var(--primitive-accent-400);
    --color-accent-hover:    var(--primitive-accent-500);

    /* Typography */
    --font-display:          var(--font-heading);  /* h1 hero moments. Override per client for special display font. */
    --font-heading:          Georgia, 'Times New Roman', serif;
    --font-body:             system-ui, -apple-system, sans-serif;
    --font-mono:             'Courier New', Courier, monospace;

    /* ── Fluid type scale ───────────────────────────────────────
       Perfect Fourth ratio (1.333) between 375px and 1280px viewports.
       Formula: clamp(min, calc(offset + slope*vw), max)
       Override --type-vp-min / --type-vp-max in child theme to
       shift the entire scale's anchor points.
       Override individual tokens for one-off adjustments.
    ─────────────────────────────────────────────────────────── */

    --type-vp-min:    375;    /* unitless - viewport width at min size */
    --type-vp-max:   1280;    /* unitless - viewport width at max size */
    --type-ratio:   1.333;    /* Perfect Fourth - change for different hierarchy feel */

    /* Fluid headings */
    --text-display:  clamp(2.25rem,  calc(1.3177rem + 3.9779vw), 4.5rem);   /* Hero display only */
    --text-h1:       clamp(1.875rem,  calc(1.25rem   + 2.5vw),    3.25rem);
    --text-h1-long:  clamp(1.75rem,  calc(1.3356rem + 1.768vw),  2.75rem);  /* Long h1 text */
    --text-h2:       clamp(1.5rem,   calc(1.0338rem + 1.989vw),  2.625rem);
    --text-h3:       clamp(1.375rem,  calc(1.05rem  + 1.4vw),    2.125rem);
    --text-h4:       clamp(1.0625rem,calc(0.8812rem + 0.7735vw), 1.5rem);

    /* Static below h4 - fluid adds no value at these sizes */
    --text-h5:       1.0625rem;   /* 17px */
    --text-h6:       0.9375rem;   /* 15px */

    /* Body - always static */
    --text-lead:     1.125rem;    /* 18px - intro paragraphs */
    --text-body:     1rem;        /* 16px */
    --text-small:    0.875rem;    /* 14px */
    --text-label:    0.75rem;     /* 12px - uppercase labels */
    --text-mono:     0.875rem;    /* 14px - code */

    --leading-tight:         1.2;
    --leading-snug:          1.4;
    --leading-base:          1.6;
    --leading-loose:         1.8;

    /* Spacing */
    --space-xs:              var(--primitive-space-2);
    --space-sm:              var(--primitive-space-4);
    --space-md:              var(--primitive-space-6);
    --space-lg:              var(--primitive-space-10);
    --space-xl:              var(--primitive-space-16);
    --space-2xl:             var(--primitive-space-24);

    /* ── Fluid section spacing ─────────────────────────────────
       Sections breathe proportionally on all screen sizes.
       clamp(min, preferred, max) between 375px and 1280px.
    ─────────────────────────────────────────────────────────── */
    --section-padding-sm:    clamp(2rem,    calc(1.116rem + 3.774vw),  4rem);     /* tight sections */
    --section-padding:       clamp(2rem,    calc(0.692rem + 5.382vw),  7rem);     /* default */
    --section-padding-lg:    clamp(4rem,    calc(1.779rem + 9.392vw),  10rem);    /* hero / feature sections */
    --padding-split:         clamp(2rem,    calc(0.692rem + 5.382vw),  7rem);     /* half-bleed text column, all four sides */
    --section-gap:           clamp(1.5rem,  calc(0.779rem + 3.094vw),  3.5rem);   /* gap between sections */

    /* Content column max widths */
    --content-narrow:        640px;   /* Long-form text, single col */
    --content-mid:           860px;   /* Two-col text, wider prose */
    --content-wide:          var(--container-max); /* Full container */

    /* Line-length caps in ch, one per component so each can be tuned on its own */
    --measure-lead:          60ch;   /* .section__lead */
    --measure-cta:           52ch;   /* .cta-band__text */
    --measure-archive:       60ch;   /* .archive-header__description */
    --measure-post-title:    20ch;   /* .post-hero__title */

    /* Layout */
    --container-max:         1200px;
    --container-padding:     var(--primitive-space-6);
    --header-height:         72px;
    --nav-collapse:          900px;   /* Viewport width where nav collapses to hamburger. Override per client. */

    /* Radius */
    --radius-sm:             var(--primitive-radius-sm);
    --radius-md:             var(--primitive-radius-md);
    --radius-lg:             var(--primitive-radius-lg);
    --radius-full:           var(--primitive-radius-full);

    /* Transitions */
    --transition-fast:       var(--primitive-duration-fast) var(--primitive-ease);
    --transition-base:       var(--primitive-duration-base) var(--primitive-ease);
    --transition-slow:       var(--primitive-duration-slow) var(--primitive-ease);


    /* ============================================================
       LEVEL 3 — COMPONENT TOKENS
       Named one-offs. Change here, updates everywhere that uses them.
       Do not override in child theme unless you have a strong reason.
    ============================================================ */

    /* Header */
    --header-bg:                 var(--color-surface-dark);
    --header-bg-scrolled:        var(--color-surface-dark);
    --header-border:             transparent;
    --header-shadow:             0 2px 12px rgba(0,0,0,0.15);
    --header-transition:         transform var(--transition-base),
                                 background var(--transition-base),
                                 box-shadow var(--transition-base);

    /* Nav */
    --nav-link-color:            var(--color-text-inverse);
    --nav-link-hover:            var(--color-brand);
    --nav-link-active:           var(--color-brand);
    --nav-link-padding:          var(--primitive-space-2) var(--primitive-space-4);
    --nav-toggle-color:          var(--color-text-inverse);

    /* Footer */
    --footer-bg:                 var(--color-surface-dark);
    --footer-text:               var(--color-text-light);
    --footer-heading:            var(--color-text-inverse);
    --footer-link:               var(--color-text-light);
    --footer-link-hover:         var(--color-brand);
    --footer-border:             var(--primitive-grey-700);

    /* Buttons */
    --btn-primary-bg:            var(--color-brand);
    --btn-primary-bg-hover:      var(--color-brand-hover);
    --btn-primary-text:          var(--color-text-inverse);
    --btn-secondary-bg:          transparent;
    --btn-secondary-border:      var(--color-brand);
    --btn-secondary-text:        var(--color-brand);
    --btn-secondary-hover-bg:    var(--color-brand);
    --btn-secondary-hover-text:  var(--color-text-inverse);
    --btn-padding-y:             0.75em;   /* em: scales with button font size */
    --btn-padding-x:             1.75em;   /* em: scales with button font size */
    --btn-padding-y-sm:          0.5em;
    --btn-padding-x-sm:          1.25em;
    --btn-padding-y-lg:          0.875em;
    --btn-padding-x-lg:          2em;
    --btn-gap:                   0.5em;    /* em: icon gap scales with font size */
    --btn-radius:                var(--radius-sm);
    --btn-font-size:             var(--text-body);
    --btn-font-weight:           600;

    /* Form inputs */
    --input-padding-y:           0.625em;  /* em: scales with input font size */
    --input-padding-x:           0.875em;  /* em: scales with input font size */
    --input-bg:                  var(--color-surface);
    --input-text:                var(--color-text);
    --input-placeholder:         var(--color-text-muted);
    --input-border:              var(--color-border-strong);
    --input-border-focus:        var(--color-brand);
    --input-radius:              var(--radius-sm);
    --input-error:               var(--color-accent);

    /* Cards */
    --card-bg:                   var(--color-surface);
    --card-border:               var(--color-border);
    --card-radius:               var(--radius-md);
    --card-shadow:               0 2px 8px rgba(0,0,0,0.06);
    --card-shadow-hover:         0 6px 24px rgba(0,0,0,0.12);
    --card-padding:              var(--primitive-space-6);

    /* Post card image */
    --card-image-ratio:          56.25%;  /* 16:9 */

    /* Overlays */
    --hero-overlay:              rgba(26, 26, 26, 0.65);

    /* Sections */
    --section-bg:                var(--color-surface);
    --section-bg-alt:            var(--color-surface-alt);
    --section-bg-dark:           var(--color-surface-dark);
    --section-bg-brand:          var(--color-brand);

    /* Split / half-half sections */
    --split-gap:                 clamp(2rem, 4vw, 4rem);
    --split-min-col:             280px;   /* Minimum column width before stacking */

    /* Booking CTA, per-part so a child theme can tune each independently */
    --booking-cta-radius:        var(--card-radius);
    --booking-cta-padding:       var(--space-lg);
    --booking-cta-gap-row:       var(--space-md);
    --booking-cta-gap-column:    var(--space-lg);
    --booking-cta-heading-size:  var(--text-h2);
    --booking-cta-price-radius:  var(--card-radius);
    --booking-cta-price-padding: var(--card-padding);
    --booking-cta-price-size:    var(--text-h2);
    --booking-cta-btn-padding-y: var(--btn-padding-y);
    --booking-cta-heading-gap:   0;

    /* .section__split--hero media box, matched to whatever photo is
       actually in use, a child theme should update this to fit */
    --hero-media-ratio: 4 / 3;

    /* Focus ring */
    --focus-ring:                2px solid var(--color-focus);
    --focus-ring-offset:         3px;

}