/* ============================================================
   Don Adán Coffee — Design Tokens
   Single source of truth for colour, type and spacing.
   These mirror the prototype tokens (tokens/*.css) so the Divi
   build stays 1:1 with the approved design.

   Use these variables everywhere:
     - In Divi "Custom CSS" boxes on modules
     - In Code modules
     - In the component styles (03-components.css)
   Update a value here and it changes site-wide.
   ============================================================ */

:root {
  /* ---- Base neutrals ---- */
  --black:      #0A0A0A;
  --white:      #FFFFFF;
  --off-white:  #F7F6F4;   /* warm paper — alternating sections */
  --gray-50:    #F4F3F1;
  --gray-100:   #EEECEA;   /* hairline borders, dividers */
  --gray-200:   #D8D6D2;   /* input borders, stronger rules */
  --gray-400:   #A8A6A2;   /* captions, muted labels */
  --gray-600:   #6B6966;   /* secondary text, captions on white */
  --gray-700:   #4A4845;   /* body text: 9.1:1 on white, 8.4:1 on off-white */
  --gray-800:   #2C2B2A;   /* black hover state */

  /* ---- Brand accent — terracotta ---- */
  --accent:        #B8541E;
  --accent-dark:   #8C3D12;  /* hover / pressed */
  --accent-light:  #D4763A;  /* on dark surfaces */
  --accent-tint:   rgba(184,84,30,0.10);

  /* ---- On-dark text steps (over black heroes) ---- */
  --on-dark-1:    rgba(255,255,255,1);
  --on-dark-2:    rgba(255,255,255,0.78);
  --on-dark-3:    rgba(255,255,255,0.45);
  --on-dark-line: rgba(255,255,255,0.10);

  /* ---- Semantic aliases (prefer these in components) ---- */
  --bg-page:        var(--white);
  --bg-alt:         var(--off-white);
  --bg-inverse:     var(--black);
  --surface-card:   var(--white);
  --surface-sunken: var(--gray-50);
  --text-strong:    var(--black);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-400);
  --text-on-dark:   var(--on-dark-2);
  --border-hairline: var(--gray-100);
  --border-input:    var(--gray-200);
  --border-strong:   var(--black);
  --eyebrow:        var(--accent);
  --link-hover:     var(--black);

  /* ---- Type families ---- */
  --font-sans:      'Gill Sans Nova', 'Gill Sans', 'Gill Sans MT', 'Montserrat', Optima, Candara, sans-serif;
  --font-condensed: 'Gill Sans Nova Condensed', 'Gill Sans Nova', 'Montserrat', sans-serif;

  /* ---- Weights (real Gill Sans Nova glyph weights only) ----
     DO NOT use 500 or 600 — they synthesise badly from Book. */
  --fw-book:      400;  /* body, nav, labels, buttons */
  --fw-xbold:     700;  /* heading emphasis, UI names */
  --fw-heavy:     800;  /* display CTAs, impact heads */
  --fw-ultrabold: 900;  /* max impact, sparingly */
  --fw-thin:      300;  /* large display only (synthesised) */

  /* ---- Display / heading scale (fluid) ---- */
  --t-hero:    clamp(3rem, 6.5vw, 6rem);
  --t-h1:      clamp(2.4rem, 5vw, 4rem);
  --t-h2:      clamp(1.8rem, 3vw, 2.6rem);
  --t-h3:      clamp(1.4rem, 2.5vw, 2rem);
  --t-h4:      1.2rem;

  /* ---- Body scale ---- */
  --t-lead:    1.05rem;
  --t-body:    1rem;
  --t-sm:      0.9rem;
  --t-xs:      0.84rem;
  --t-caption: 0.72rem;

  /* ---- Label / eyebrow scale ---- */
  --t-label:   0.65rem;
  --t-micro:   0.6rem;

  /* ---- Line heights ---- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.7;
  --lh-loose:  1.85;

  /* ---- Tracking ---- */
  --ls-display: -0.03em;
  --ls-tight:   -0.02em;
  --ls-label:   0.14em;
  --ls-wide:    0.2em;
  --ls-xwide:   0.28em;

  /* ---- Spacing scale ---- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.5rem;   --sp-6:  2rem;
  --sp-7:  2.5rem;   --sp-8:  3rem;     --sp-10: 4rem;
  --sp-12: 5rem;     --sp-16: 6rem;

  /* ---- Section rhythm ---- */
  --section-pad-y:    5rem;
  --section-pad-y-sm: 3rem;
  --section-pad-x:    3rem;
  --section-pad-x-sm: 1.5rem;
  --gap-grid:         2rem;
  --gap-grid-wide:    4rem;

  /* ---- Container ---- */
  --container:      1300px;
  --container-text: 720px;

  /* ---- Radius (brand is square) ---- */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border:      1px solid var(--gray-100);
  --border-2:    1px solid var(--gray-200);
  --border-dark: 1px solid rgba(255,255,255,0.10);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-mid:  0.4s;
  --dur-slow: 0.6s;

  /* ---- Scrims over photography ---- */
  --scrim-hero: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.1) 100%);
  --scrim-side: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
  --scrim-card: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.15) 100%);

  /* ---- Pathway gradients (homepage 3-up) ---- */
  --grad-green: radial-gradient(circle at 30% 20%, #8DC87A, #0E1F0D);
  --grad-amber: radial-gradient(circle at 30% 20%, #E8C87A, #3A2708);
  --grad-slate: radial-gradient(circle at 30% 20%, #7AB4D8, #050F18);
}