/* =========================================================================
   variables.css — Root design tokens
   The Beekeeper House

   Single source of truth for colour, type, space, radius and elevation.
   No hard-coded hex value or font size may appear in any other stylesheet.
   ========================================================================= */

:root {
  /* ---- Primary palette ---- */
  --color-deep-water:     #22405E;
  --color-beekeeper-blue: #33608F;
  --color-morning-blue:   #6B93BD;
  --color-honey-gold:     #C9A227;
  --color-pale-honey:     #D9BC66;
  --color-beeswax-cream:  #FAF6EE;

  /* ---- Derived neutrals ---- */
  --color-ink:            #15293C;
  --color-cream-deep:     #F2EBDD;
  --color-border:         #E3D9C6;
  --color-white:          #FFFFFF;

  /* ---- Semantic assignments ---- */
  --bg-page:              var(--color-beeswax-cream);
  --bg-alt:               var(--color-cream-deep);
  --bg-inverse:           var(--color-deep-water);
  --text-primary:         var(--color-deep-water);
  --text-inverse:         var(--color-beeswax-cream);
  --text-link:            var(--color-beekeeper-blue);
  --cta-bg:               var(--color-honey-gold);
  --cta-text:             var(--color-ink);        /* 6.11:1 — do not change */
  --border-hairline:      var(--color-border);
  --focus-ring:           var(--color-beekeeper-blue);

  /* Hairline rule on dark grounds. Morning blue is decorative-only, which
     is exactly what a divider is. */
  --border-hairline-inverse: rgba(107, 147, 189, 0.32);

  /* ---- Type families ---- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Leading & measure ---- */
  --leading-display: 1.25;
  --leading-body:    1.7;
  --leading-tight:   1.4;
  --measure:         68ch;

  /* ---- Type scale — mobile (< 640px) ----
     Even integers only. Project floor is 12px; 10px is not permitted. */
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-h5:      16px;
  --fs-h6:      14px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-button:  16px;

  /* ---- Hero type ----
     One step down the scale from H1 / lead / body — about 15% smaller. An
     exact 15% lands on decimals (56 → 47.6), which the sizing rule bans, so
     each size snaps to the next value on the scale.
     The standfirst floors at 16px: this project does not permit body copy
     below that, however small the rest of the opening gets. */
  --fs-hero-title: 28px;

  /* The subline and standfirst are the hero's second beat now — they arrive
     on their own screen rather than sharing one with the headline, and at
     16px they read as a caption under it. Put back onto the body scale:
     18/16 here, 20px each on desktop. The 16px floor still holds; these were
     only ever pushed down to it because they had to sit quietly beneath a
     headline they no longer share a frame with. */
  --fs-hero-lead:  18px;
  --fs-hero-intro: 16px;

  /* ---- Space (8px base, even values only) ---- */
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;
  /* Derived, on-scale. Used only for the final sections, where the page
     is meant to feel like it is slowing down. */
  --space-10: 160px;

  /* ---- Grid margins per breakpoint ---- */
  --grid-margin: var(--space-3);   /* 16px mobile */
  --grid-gutter: var(--space-3);

  /* ---- Radius & elevation ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 16px rgba(34, 64, 94, 0.08);

  /* For large media only. Two layers — a tight contact shadow to seat the
     edge, and a wide soft one for the lift — so it reads as considered
     rather than as a blur behind a box. Tinted with deep water like every
     other shadow here; never neutral grey. */
  --shadow-media:
    0 2px 6px rgba(34, 64, 94, 0.07),
    0 18px 44px rgba(34, 64, 94, 0.16);

  /* ---- Container ---- */
  --container-max: 1280px;

  /* The header floats over the hero rather than sitting above it, so the hero
     fills the screen outright. Interior templates, whose header is solid from
     the start, offset their content by this instead.
     Measured in the open state, where the logo is at its largest: 76px
     mobile, 96px desktop — rounded up so it always clears. */
  --header-height: 80px;

  /* ---- Motion ---- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-calm:  320ms;
  /* For movement with distance to cover — a panel opening, a plate sweeping
     across a button. At --dur-calm these read as a snap rather than a
     reveal. */
  --dur-slow:  460ms;
}

/* ---- Tablet 640–1024 ---- */
@media (min-width: 640px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-hero-title: 36px;
    --grid-margin: var(--space-4);   /* 24px */
    --grid-gutter: var(--space-4);
  }
}

/* ---- Desktop 1024–1440 ---- */
@media (min-width: 1024px) {
  :root {
    --fs-h1:    56px;
    --fs-h2:    36px;
    --fs-h3:    28px;
    --fs-h4:    20px;
    --fs-h5:    18px;
    --fs-h6:    16px;
    --fs-lead:  20px;
    --fs-body:  18px;
    --fs-hero-title: 48px;
    --fs-hero-lead:  20px;
    --fs-hero-intro: 20px;
    --grid-margin: var(--space-5);   /* 32px */
    --grid-gutter: var(--space-5);
    --header-height: 100px;
  }
}

/* ---- Ultra-wide > 1440 ---- */
@media (min-width: 1441px) {
  :root {
    --fs-h1:      64px;
    --fs-h2:      40px;
    --fs-h3:      32px;
    --fs-h4:      24px;
    --fs-h5:      20px;
    --fs-h6:      18px;
    --fs-small:   16px;
    --fs-caption: 14px;
    --fs-button:  18px;
    --fs-hero-title: 56px;
  }
}