/* ==========================================================================
   Flora Psychotherapy — Design Tokens
   Every value here comes from design.md. Do not introduce a value that isn't
   in that file; change design.md first, then mirror it here.
   ========================================================================== */

/* ---------- Typefaces (self-hosted, see assets/fonts/LICENSE.md) ---------- */
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-400.woff2') format('woff2');
             font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-400i.woff2') format('woff2');
             font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-500.woff2') format('woff2');
             font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-700.woff2') format('woff2');
             font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('../fonts/MonaSans-Regular.woff2') format('woff2');
             font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('../fonts/MonaSans-Italic.woff2') format('woff2');
             font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('../fonts/MonaSans-Medium.woff2') format('woff2');
             font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('../fonts/MonaSans-SemiBold.woff2') format('woff2');
             font-weight:600; font-style:normal;  font-display:swap; }

:root {
  /* ---------- Colour ---------- */
  --brand:        #4C0000;  /* Oxblood.    Logo, primary button, focus ring, links   */
  --ink:          #3D0F0F;  /* Deep Bark.  All body copy and headings on light       */
  --ink-muted:    #6B4A4A;  /* Muted Rose. Captions, metadata, input borders         */
  --surface:      #F7F0EA;  /* Cream.      Page background                           */
  --raised:       #EFDECD;  /* Blush.      Cards, raised panels                      */
  --canvas:       #FFFFFF;  /* Elevated panels, form fields                          */
  --sage-band:    #CCD8BA;  /* Full-bleed section interruptions                      */
  --sage-text:    #63734F;  /* Accent links and small accent text (4.54:1 on cream)  */
  --sage-deco:    #7E8F6A;  /* Icons, rules, 24px+ type ONLY. Never body copy        */
  --divider:      #E3D3C1;  /* Sand Line. Decorative hairlines ONLY (1.30:1)         */

  --success:      #4F6B45;
  --warning:      #96590A;
  --danger:       #A63A2B;
  --info:         #5A6B70;

  --brand-hover:  #3D0000;

  /* ---------- Type ---------- */
  --font-display: 'Gambetta', 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body:    'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:  clamp(3rem, 7vw, 5.5rem);
  --fs-h1:       clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.125rem;
  --fs-body-lg:  1.25rem;
  --fs-body:     1.125rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.8125rem;

  /* Display sits tighter than its own leading; everything else runs at 1.4.
     That gap is the whole system. See design.md § Typography. */
  --lh-display:  0.96;
  --lh-h1:       1.0;
  --lh-h2:       1.05;
  --lh-h3:       1.2;
  --lh-h4:       1.3;
  --lh-body:     1.4;

  --ls-display:  -0.02em;
  --ls-h2:       -0.015em;
  --ls-h3:       -0.01em;
  --ls-caption:  0.08em;

  /* ---------- Spacing (8px base) ---------- */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-6: 48px;  --sp-8: 64px;  --sp-12: 96px; --sp-16: 128px; --sp-20: 160px;

  --measure:     68ch;      /* prose never runs to full container width */
  --container:   1200px;
  --gutter:      24px;

  /* ---------- Radius & elevation ---------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 999px;

  /* Tinted with the ink colour, not black, so shadows read warm on cream. */
  --shadow-sm: 0 2px 8px rgba(61,15,15,0.08);
  --shadow-md: 0 8px 24px rgba(61,15,15,0.12);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;

  /* Real rendered height of the bar, not a guess: the logo is 242px wide on a
     380x154 source, so 98px tall, plus 16px padding top and bottom. Everything
     that clears the bar (.page-hero, .hero__stage, .hero__ground, .nav__panel)
     offsets by this, so it has to match or they all sit in the wrong place. */
  --nav-h:       130px;
}