/* ============================================================================
   Footcare By Lina — BRAND TOKENS (single source of truth)
   Active direction: A — "Calm Clinical".
   Web + print + guidelines all read these variables. Re-skin the whole brand by
   editing the values below (mirror in brand/tokens.json).
   Convention: this file expects a sibling "fonts/" folder of woff2 files.
   All text/background role pairs verified WCAG 2.1 AA (most AAA) — tools/contrast.py
   ============================================================================ */

/* ---- Self-hosted open-licence fonts (SIL OFL 1.1) ---- */
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/Fraunces-Regular.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/Fraunces-Medium.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/Fraunces-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/Fraunces-Bold.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/NunitoSans-Regular.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/NunitoSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/NunitoSans-Bold.woff2") format("woff2"); }
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/NunitoSans-ExtraBold.woff2") format("woff2"); }

:root {
  /* ---- Brand colours (hex; see tokens.json for RGB/CMYK) ---- */
  --c-ink:            #1E2A55;
  --c-ink-deep:       #16203F;
  --c-primary:        #1F5A47;
  --c-primary-hover:  #184A3A;
  --c-accent:         #2E8B7C;
  --c-accent-soft:    #61BAAE;
  --c-lilac:          #C4C3F9;
  --c-periwinkle:     #788EE2;
  --c-on-primary:     #FFFFFF;
  --c-text-muted:     #516079;
  --c-bg:             #FAFBFC;
  --c-surface:        #FFFFFF;
  --c-tint-mint:      #E7F4F1;
  --c-tint-lilac:     #EDEDFB;
  --c-tint-sand:      #F6EFE7;
  --c-border:         #E3E7EE;
  --c-footer-text:    #D6DCEC;

  /* ---- Semantic roles ---- */
  --color-bg:          var(--c-bg);
  --color-surface:     var(--c-surface);
  --color-text:        var(--c-ink);
  --color-text-muted:  var(--c-text-muted);
  --color-heading:     var(--c-ink);
  --color-primary:     var(--c-primary);
  --color-primary-hover: var(--c-primary-hover);
  --color-on-primary:  var(--c-on-primary);
  --color-secondary:   var(--c-ink);
  --color-accent:      var(--c-accent);
  --color-accent-soft: var(--c-accent-soft);
  --color-link:        var(--c-primary);
  --color-border:      var(--c-border);
  --color-focus:       var(--c-accent);

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;

  /* Fluid type scale (min 18px body for older readers) */
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-base: 1.125rem;                              /* 18px */
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --fs-2xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
  --fs-3xl:  clamp(2.3rem, 1.7rem + 2.8vw, 3.4rem);
  --fs-4xl:  clamp(2.7rem, 1.9rem + 3.6vw, 4rem);
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.6;

  /* ---- Spacing ---- */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  /* ---- Radii / shadow / layout ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(22,32,63,.06), 0 1px 3px rgba(22,32,63,.08);
  --shadow-md:0 4px 12px rgba(22,32,63,.08), 0 2px 4px rgba(22,32,63,.06);
  --shadow-lg:0 18px 40px rgba(22,32,63,.12);
  --container:1120px; --container-narrow:760px; --tap:48px;
}