/* ==========================================================================
   Chiltern Health Centre — Design Tokens
   Palette derived directly from the existing logo gradient + wordmark navy.
   Structure & geometry follow the Awesomic editorial reference:
   hairline borders over shadows, generous radii, one accent as punctuation.
   ========================================================================== */

:root {
  /* ---- Brand blues (sampled from the logo mark) ---------------------- */
  --c-abyss:      #04203F;  /* deepest ink — footer, dark sections          */
  --c-navy:       #073064;  /* wordmark navy — headings, primary CTA        */
  --c-navy-600:   #0B3D7A;  /* hover state for navy surfaces                */
  --c-ocean:      #04589F;  /* mid-gradient blue — links, icons, sub-heads  */
  --c-azure:      #1B8FD4;  /* bright blue — secondary emphasis             */
  --c-cyan:       #38C0E9;  /* logo highlight — THE accent, badges only     */
  --c-sky:        #9FE0F7;  /* pale blue — soft fills, rules on dark        */
  --c-wash:       #E9F3FA;  /* tinted section background                    */
  --c-frost:      #F4F8FC;  /* page canvas                                  */
  --c-white:      #FFFFFF;

  /* ---- Cool neutrals (kept blue-leaning, never warm grey) ------------ */
  --c-slate-900:  #0F2440;
  --c-slate-700:  #35506F;  /* body copy                                    */
  --c-slate-500:  #5B7590;  /* muted copy, metadata                         */
  --c-slate-400:  #8AA0B8;  /* placeholders, disabled                       */
  --c-slate-200:  #D6E2ED;  /* strong borders, dividers                     */
  --c-slate-100:  #E4EDF5;  /* hairline border — the default rule           */

  /* ---- Semantic ------------------------------------------------------ */
  --bg-canvas:      var(--c-frost);
  --bg-card:        var(--c-white);
  --bg-subtle:      var(--c-wash);
  --bg-dark:        var(--c-navy);
  --bg-deep:        var(--c-abyss);

  --text-primary:   var(--c-navy);
  --text-body:      var(--c-slate-700);
  --text-muted:     var(--c-slate-500);
  --text-invert:    var(--c-white);
  --text-invert-mu: #A9C6E4;

  --border-hair:    var(--c-slate-100);
  --border-strong:  var(--c-slate-200);
  --border-invert:  rgba(159, 224, 247, 0.22);

  --link:           var(--c-ocean);

  /* ---- Accent layer -------------------------------------------------- */
  /* Everything themeable lives here. css/themes.css swaps ONLY this block,
     so the blues above never move. Defaults = the original all-blue scheme. */
  --accent:         var(--c-cyan);   /* accent badge fill                  */
  --accent-ink:     var(--c-abyss);  /* text sitting on --accent           */
  --accent-strong:  var(--c-ocean);  /* accent at text-safe contrast       */
  --accent-soft:    var(--c-wash);   /* tinted fill behind icons           */
  --accent-quiet:   var(--c-sky);    /* large decorative numerals, marks   */

  --success:        var(--c-ocean);  /* ticks, "available", positives      */
  --success-soft:   var(--c-wash);

  --surface-warm:   var(--c-wash);   /* alternate section background       */
  --border-warm:    var(--border-hair);

  --grad-accent-from: var(--c-cyan);
  --grad-accent-to:   var(--c-azure);

  /* ---- Gradients (echo the logo's blue sweep) ------------------------ */
  --grad-brand:  linear-gradient(135deg, var(--c-navy) 0%, var(--c-ocean) 55%, var(--c-azure) 100%);
  --grad-sweep:  linear-gradient(120deg, var(--c-abyss) 0%, var(--c-navy) 45%, var(--c-ocean) 100%);
  --grad-soft:   linear-gradient(160deg, var(--c-white) 0%, var(--c-wash) 100%);
  --grad-accent: linear-gradient(90deg, var(--grad-accent-from) 0%, var(--grad-accent-to) 100%);

  /* ---- Typography ---------------------------------------------------- */
  /* Wordmark is a wide geometric sans → Outfit echoes it for display.
     Body is set in Inter for long-form legibility at small sizes.        */
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-caption:     0.75rem;   /* 12px */
  --fs-small:       0.8125rem; /* 13px */
  --fs-body:        0.9375rem; /* 15px */
  --fs-body-lg:     1.0625rem; /* 17px */
  --fs-subheading:  1.25rem;   /* 20px */
  --fs-h3:          1.5rem;    /* 24px */
  --fs-h2:          2.25rem;   /* 36px */
  --fs-h1:          3rem;      /* 48px */
  --fs-display:     3.75rem;   /* 60px */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-7:  28px;  --sp-8:  32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;
  --sp-24: 96px;  --sp-30: 120px;

  /* ---- Layout -------------------------------------------------------- */
  --page-max:      1200px;
  --page-gutter:   24px;
  --section-gap:   96px;
  --card-padding:  28px;

  /* ---- Radii (Awesomic geometry: nothing sharper than 12px) ---------- */
  --r-badge:  12px;
  --r-input:  14px;
  --r-button: 14px;
  --r-md:     20px;
  --r-lg:     28px;
  --r-card:   36px;
  --r-xl:     48px;
  --r-pill:   999px;

  /* ---- Elevation (hairlines do the work; shadows stay whisper-quiet) -- */
  --sh-none:   none;
  --sh-cta:    inset 0 0.5px 0 0 rgba(255,255,255,.35),
               0 0 0 1.5px rgba(7,48,100,.9),
               0 4px 10px 0 rgba(4,32,63,.18);
  --sh-card:   0 1px 2px 0 rgba(15,36,64,.03);
  --sh-lift:   0 12px 32px -8px rgba(7,48,100,.14);
  --sh-float:  0 24px 60px -18px rgba(7,48,100,.28);

  /* ---- Motion -------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  520ms;
}

/* Fluid display sizes for small screens */
@media (max-width: 860px) {
  :root {
    --fs-display:   2.5rem;
    --fs-h1:        2.125rem;
    --fs-h2:        1.75rem;
    --fs-h3:        1.3125rem;
    --section-gap:  64px;
    --card-padding: 22px;
    --page-gutter:  18px;
  }
}