/*
 * tokens.css — the theme layer for Forest Green
 * =======================================
 * Every value that decides how this site looks lives here: colour,
 * type, spacing, shape, shadow and motion. base.css consumes these
 * tokens and contains no literal colours of its own, so a change
 * here lands everywhere that value is used and nowhere it is not.
 *
 * Forest green on warm off-white. Practical, established, unflashy.
 * Sensible-money feel.
 *
 * Sections
 *   1. Brand colours (raw palette)
 *   2. Semantic colour tokens (surface, text, border, action)
 *   3. Focus-ring (structural, variant-safe)
 *   4. Typography
 *   5. Spacing scale
 *   6. Layout
 *   7. Shape (radius)
 *   8. Elevation (shadows)
 *   9. Motion
 *  10. Card-weight system
 *  11. Sticky CTA bar & cookie banner (shared height token)
 *  12. Component-specific tokens
 *
 * ── Contrast, measured on these values (WCAG 2.x) ──────────────
 *   Body text on page canvas                      14.93:1  ok
 *   Body text on card / input / sticky bar        16.26:1  ok
 *   Body text on service and testimonial cards    13.94:1  ok
 *   Body text on conversion card (estimator, enq  14.64:1  ok
 *   Muted text on page canvas                      5.74:1  ok
 *   Muted text on card / input / sticky bar        6.25:1  ok
 *   Muted text on service and testimonial cards    5.36:1  ok
 *   Muted text on conversion card (estimator, en   5.63:1  ok
 *   Text on cookie banner                         18.88:1  ok
 *   Text on demo banner                           12.32:1  ok
 *   Button label on primary button                 6.54:1  ok
 *   Button label on primary button (hover)        10.23:1  ok
 *   Button label on call button / emergency bann   8.25:1  ok
 *   Button label on call button (hover)           10.93:1  ok
 *   Button label on WhatsApp button                5.31:1  ok
 *   Button label on WhatsApp button (hover)        7.65:1  ok
 *
 *   Focus ring, two-tone: inner #ffffff / outer #0a0a0a
 *   inner vs outer                                19.80:1  ok
 *   worst case, vs WhatsApp button                 5.31:1  ok
 *   (the visible tone is measured: on a dark button the
 *    light inner ring carries it, on a light one the dark halo)
 * ────────────────────────────────────────────────────────────────
 */

:root {

  /* ── 1. Brand colours (raw palette) ────────────────────────── */
  /*
   * These are the canonical hue references for this variant.
   * Semantic tokens below reference these; typically you only
   * need to change this block to shift the whole palette.
   */
  --brand-green: #2d6a2d;
  --brand-green-dark: #1e4a1e;
  --brand-red: #b82020;
  --brand-red-dark: #8a1818;

  /* WhatsApp green — darkened from #1fa855 (3.09:1) to #177a40 (5.39:1) */
  --brand-whatsapp:        #177a40;
  --brand-whatsapp-dark:   #0f5c2e;

  /* Neutral ramp */
  --neutral-50: #f7f5f0;
  --neutral-100: #f1ede6;
  --neutral-200: #d8d0c4;
  --neutral-300: #bdb6a8;
  --neutral-600: #5a6358;
  --neutral-900: #1c2218;
  --neutral-950: #0a0a0a;

  /* Accent tints (light variants for surfaces) */
  --tint-green-light: #eef5ec;
  --tint-blue-light: #eef5ec;
  --tint-blue-border: #a8d0a4;

  /* Alert / error */
  --brand-error:           #9a1f1f;

  /* Demo banner (intentionally off-brand — keep as raw values) */
  --demo-bg:               #1a1a1a;
  --demo-text:             #ffd54a;

  /* Cookie / dark UI */
  --dark-surface:          #111111;


  /* ── 2. Semantic colour tokens ──────────────────────────────── */

  /* Surfaces */
  --color-bg: #f7f5f0;      /* page canvas        */
  --color-surface: #ffffff;                 /* base card/panel    */
  --color-surface-raised: #ffffff;                 /* elevated card      */
  --color-surface-accent: #eef5ec; /* conversion surface */
  --color-surface-recede: #f1ede6;      /* supporting surface */
  --color-surface-dark:    var(--dark-surface);     /* cookie banner etc  */

  /* Text */
  --color-text: #1c2218;      /* 14.93:1 on page bg    */
  --color-muted: #5a6358;      /* 5.74:1 on page bg    */
  --color-text-inverse: #ffffff;                 /* on dark surfaces   */
  --color-error-text:      var(--brand-error);
  --color-success-text:    #0b5d3b;

  /* Borders */
  --color-border: #d8d0c4;
  --color-border-error:    var(--brand-error);

  /* Action colours */
  --color-primary: #2d6a2d;
  --color-primary-dark: #1e4a1e;
  /* --color-emergency is the URGENT ACTION colour: the call button in the
   * header, the hero and the sticky bar, plus the emergency banner. It is the
   * most prominent colour on the page, so each style pack must set its own.
   * Eight packs once left it at the shared default, which meant the single
   * loudest element was identical across more than half the range while the
   * pack's own --color-primary never touched a main button. Urgency is not
   * the property of one hex; it comes from saturation and warmth relative to
   * the palette it sits in. */
  --color-emergency: #8a3212;
  --color-emergency-dark: #6b270e;
  /* Label colour ON the urgent action colour. Defaults to the generic inverse,
   * but a light action colour (an amber, say) needs a dark label while the
   * rest of the palette still wants white — so it is its own token rather
   * than borrowing --color-text-inverse. */
  --color-emergency-text:  var(--color-text-inverse);
  --color-whatsapp: #0d7a5c;
  --color-whatsapp-dark: #0a5f48;

  /* Link */
  --color-link: #1e4a1e;

  /* GBP badge surface */
  --color-badge-bg: #eef5ec;
  --color-badge-border: #a8d0a4;

  /* Admin alert tint */
  --color-alert-bg:        #fff5f5;


  /* ── 3. Focus ring ─────────────────────────────────────────── */
  /*
     * Two-tone technique: a light inner outline with a dark outer
     * halo. Whatever sits behind it, one of the two tones is the one
     * you see, which is what keeps the ring visible on a dark button
     * and on a white card without any per-component overrides.
     *
     * Inner vs outer                     19.80:1
     * Visible tone vs WhatsApp button    5.31:1
     *
     * Do NOT replace these with a single flat colour. A ring painted
     * in the colour of the button it outlines measures 1.00:1 — it is
     * invisible to every keyboard user, on every call to action, and
     * automated checkers do not catch it because they do not measure a
     * focus indicator against the background of the focused element.
     */
  --focus-ring-inner: 3px solid #ffffff;
  --focus-ring-outer: 0 0 0 5px #0a0a0a;  /* #0a0a0a */
  --focus-ring-offset: 2px;


  /* ── 4. Typography ─────────────────────────────────────────── */

  /* Font stacks — system fonts only, zero network cost */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    ui-monospace, "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, monospace;

  /* Headings default to the body face, so a pack that says nothing is
   * unchanged. A pack that sets this gets a genuine type PAIRING — the
   * strongest differentiator available without web fonts, which this project
   * deliberately does not use (no build step, no external requests).
   *
   * Before this existed, a pack wanting serif headings had to set --font-sans
   * to a serif, which applied it to body copy, nav, labels and form inputs
   * too. That is a legitimate look, but it was the ONLY look available, and
   * the build report called the value "heading_font" while it was really the
   * body face. */
  --font-heading:  var(--font-sans);

  /* Type scale — minor third (×1.25) anchored at 1rem
   *
   * The four heading steps are ALL fluid, and must stay that way.
   *
   * Previously only --text-4xl was fluid — clamp(1.75rem, 4vw, 3.052rem) —
   * while 2xl and 3xl were fixed rem. A fluid step shrinks with the viewport
   * and a fixed one does not, so below 976px they crossed over: on a phone
   * the h1 rendered at 28px beneath an h2 at 39px and an h3 at 31px. The
   * business's headline was the third-largest text on its own page, on every
   * phone, every tablet and small laptops.
   *
   * Each step interpolates from a mobile size at 375px to exactly its former
   * desktop value at 1440px, so desktop rendering is unchanged while the
   * 1.25 ratio now holds at every width:
   *
   *                    375px       1440px
   *   h1 / 4xl         32.0px  ->  48.8px
   *   h2 / 3xl         25.6px  ->  39.1px
   *   h3 / 2xl         20.5px  ->  31.2px
   *   h4 / xl          16.4px  ->  25.0px
   */
  --text-xs:     0.64rem;    /*  ~10px — legal small-print only    */
  --text-sm:     0.8rem;     /*  ~13px — captions, labels          */
  --text-base:   1rem;       /*   16px — body copy                 */
  --text-lg:     1.25rem;    /*   20px — lead text / large UI      */
  --text-xl:     clamp(1.025rem, 0.836rem + 0.808vw, 1.563rem);  /* h4 */
  --text-2xl:    clamp(1.280rem, 1.046rem + 1.005vw, 1.953rem);  /* h3 */
  --text-3xl:    clamp(1.600rem, 1.305rem + 1.258vw, 2.441rem);  /* h2 */
  --text-4xl:    clamp(2.000rem, 1.630rem + 1.577vw, 3.052rem);  /* h1 */

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Font weights */
  --weight-normal:   400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.06em;


  /* ── 5. Spacing scale ──────────────────────────────────────── */
  /*
   * 4px base unit. Use multiples of this exclusively in base.css.
   * Ad-hoc rem literals in base.css are a bug.
   */
  --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 */


  /* ── 6. Layout ─────────────────────────────────────────────── */
  /*
   * A single max-width token for all content columns.
   * Header, main, and footer must all use --layout-max-w so
   * chrome and content never appear misaligned.
   */
  --layout-max-w:  1100px;
  --layout-gutter: var(--space-5);  /* 20px — consistent side padding */


  /* ── 7. Shape (radius) ─────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 5px;   /* inputs, small badges */
  --radius: 6px;  /* cards, main components */
  --radius-lg: 8px;  /* hero image, large panels */
  --radius-full: 9999px;  /* pills, FAB */


  /* ── 8. Elevation (shadows) ────────────────────────────────── */
  --shadow-none:  none;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 3px 10px rgba(0,0,0,0.10);
  --shadow-lg: 0 6px 18px rgba(0,0,0,0.14);
  --shadow-fab:   0 4px 14px rgba(0, 0, 0, 0.20);

  /* Card-weight shadows — used by the card system in §10 */
  --shadow-card-neutral:    var(--shadow-sm);
  --shadow-card-conversion: var(--shadow-md);
  --shadow-card-hover:      var(--shadow-md);


  /* ── 9. Motion ─────────────────────────────────────────────── */
  --duration-fast:    0.12s;
  --duration-normal:  0.2s;
  --duration-slow:    0.35s;
  --ease-standard:    ease;
  --ease-enter:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:        cubic-bezier(0.4, 0.0, 1, 1);


  /* ── 10. Card-weight system ────────────────────────────────── */
  /*
   * Three distinct visual weights prevent conversion surfaces
   * from looking identical to supporting content.
   *
   * CONVERSION (card--conversion)
   *   Purpose : price estimator, enquiry form — where money is made
   *   Signal  : elevated, coloured accent background, strong left rule,
   *             deeper shadow — unmistakeable as "act here"
   *
   * NEUTRAL (card — default)
   *   Purpose : content sections, testimonials, FAQ accordion body
   *   Signal  : white background, single-pixel border, subtle shadow
   *
   * RECEDE (card--recede)
   *   Purpose : accreditation badges, legal notices, secondary info
   *   Signal  : grey background, no border, no shadow — visually quiet
   */

  /* Conversion card */
  --card-conversion-bg: #eef5ec;
  --card-conversion-border:     2px solid var(--color-primary);
  --card-conversion-border-l:   4px solid var(--color-primary);
  --card-conversion-shadow:     var(--shadow-lg);
  --card-conversion-radius:     var(--radius);

  /* Neutral card (default) */
  --card-neutral-bg:            var(--color-surface);
  --card-neutral-border:        1px solid var(--color-border);
  --card-neutral-shadow:        var(--shadow-card-neutral);
  --card-neutral-radius:        var(--radius);

  /* Recede card */
  --card-recede-bg:             var(--color-surface-recede);
  --card-recede-border:         none;
  --card-recede-shadow:         var(--shadow-none);
  --card-recede-radius:         var(--radius);


  /* ── 11. Sticky CTA bar & cookie banner ─────────────────────── */
  /*
   * Both the sticky mobile CTA bar and the cookie banner must
   * share a single height token so neither ever obscures the other.
   * The cookie banner is offset by this value on mobile.
   */
  --sticky-cta-height: 64px;   /* actual rendered height of .sticky-cta-bar */


  /* ── 12. Component-specific tokens ─────────────────────────── */

  /* Gallery */
  --gallery-aspect-ratio:  300 / 220;   /* matches HTML width/height attrs */

  /* Buttons */
  --btn-radius: 5px;
  --btn-padding-y:     var(--space-3);
  --btn-padding-x:     var(--space-5);
  --btn-padding-y-lg:  0.9rem;
  --btn-padding-x-lg:  var(--space-6);

  /* Forms */
  --input-radius:  var(--radius-md);
  --input-border:  1px solid var(--color-border);
  --input-padding: var(--space-3);

  /* Header */
  --header-bg:         var(--color-surface);
  --header-padding-y:  var(--space-3);
  --header-padding-x:  var(--layout-gutter);

  /* Brand name in header */
  --brand-name-size:   1.1rem;
  --brand-name-weight: var(--weight-extrabold);

  /* Nav */
  --nav-font-size:     0.95rem;
  --nav-font-weight:   var(--weight-semibold);
  --nav-gap:           var(--space-5);

  /* Admin table */
  --admin-table-font:  var(--text-sm);

  /* Breadcrumb */
  --breadcrumb-font:   var(--text-sm);

}