/* =============================================================================
   Design tokens
   =============================================================================

   The palette is taken from the materials this trade actually works with:
   wet Angers slate for the dark ground, Flemish limestone and sand for the
   warm surfaces, and new copper — the metal a zinc worker keeps in the van —
   for the one accent colour. Copper appears on calls to action and on the
   truss mark, and nowhere else.

   Contrast is checked, not assumed:
     slate-900 on chalk ........ 14.7:1
     slate-500 on chalk .......... 5.4:1
     white on copper-600 ......... 4.8:1
     copper-300 on slate-900 ..... 6.4:1
     stone-300 on slate-900 ...... 9.2:1
============================================================================= */

:root {
    /* --- Slate: the structural colour ------------------------------------ */
    --slate-950: #0E1822;
    --slate-900: #16222E;
    --slate-800: #1E2E3D;
    --slate-700: #2A3F52;
    --slate-600: #3B5468;
    --slate-500: #52657A;
    --slate-400: #6E8091;

    /* --- Stone and sand: the human, domestic colours --------------------- */
    --stone-400: #ADA99E;
    --stone-300: #C7C4BB;
    --stone-200: #DEDBD3;
    --stone-100: #E9E6DF;
    --sand-100:  #EBE5D9;
    --sand-50:   #F2EEE5;
    --chalk:     #F5F4F0;
    --white:     #FFFFFF;

    /* --- Copper: the accent, used sparingly ------------------------------ */
    --copper-700: #8E4E24;
    --copper-600: #A85F2E;
    --copper-500: #C0743C;
    --copper-300: #D9945C;

    /* --- Semantic roles -------------------------------------------------- */
    --bg:            var(--chalk);
    --bg-warm:       var(--sand-50);
    --bg-dark:       var(--slate-900);
    --bg-dark-alt:   var(--slate-800);
    --surface:       var(--white);

    --text:          var(--slate-900);
    --text-muted:    var(--slate-500);
    --text-on-dark:  var(--white);
    --text-on-dark-muted: var(--stone-300);
    --text-on-dark-faint: var(--stone-400);   /* 5.9:1 on slate-800 */

    --border:        var(--stone-200);
    --border-strong: var(--stone-300);
    --border-dark:   rgba(255 255 255 / 0.14);

    --accent:        var(--copper-600);
    --accent-hover:  var(--copper-700);
    --accent-on-dark: var(--copper-300);

    --focus:         var(--copper-500);

    --danger:        #9B2C1F;
    --success:       #2E5E3E;

    /* --- Type ------------------------------------------------------------
       Bitter is a slab: its serifs sit square, like the joint plates on a
       timber truss. It carries the headlines. Archivo is a sturdy grotesque
       built for small sizes and dense information — it carries everything
       else. The fallbacks are chosen to keep the same rhythm if a font file
       ever fails to load.
    ---------------------------------------------------------------------- */
    --font-display: 'Bitter', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.88rem);
    --step-0:  clamp(1rem,    0.97rem + 0.15vw, 1.09rem);
    --step-1:  clamp(1.19rem, 1.13rem + 0.28vw, 1.36rem);
    --step-2:  clamp(1.41rem, 1.31rem + 0.48vw, 1.70rem);
    --step-3:  clamp(1.68rem, 1.52rem + 0.79vw, 2.13rem);
    --step-4:  clamp(2.00rem, 1.75rem + 1.24vw, 2.66rem);
    --step-5:  clamp(2.37rem, 2.00rem + 1.87vw, 3.32rem);
    --step-6:  clamp(2.20rem, 1.55rem + 2.90vw, 4.16rem);

    --leading-tight: 1.12;
    --leading-snug:  1.3;
    --leading-body:  1.65;

    --tracking-tight: -0.018em;
    --tracking-label:  0.13em;

    /* --- Space ----------------------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-9:  4rem;
    --space-10: 5rem;
    --space-11: 6.5rem;

    /* Vertical rhythm between full-width sections, one value everywhere so
       nothing needs a margin override later. */
    --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);

    /* --- Shape ----------------------------------------------------------- */
    --radius-sm: 2px;
    --radius:    3px;
    --radius-lg: 4px;

    --shadow-sm: 0 1px 2px rgb(22 34 46 / 0.06);
    --shadow:    0 2px 4px rgb(22 34 46 / 0.06), 0 8px 20px -8px rgb(22 34 46 / 0.10);
    --shadow-lg: 0 4px 10px rgb(22 34 46 / 0.08), 0 24px 48px -20px rgb(22 34 46 / 0.22);

    /* --- Layout ---------------------------------------------------------- */
    --container:      1200px;
    --container-wide: 1440px;
    --container-text: 68ch;
    --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem);

    --header-h: 4.5rem;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 900px) {
    :root { --header-h: 5.25rem; }
}