/* ============================================================
   Enfoco — Design Tokens (LOCKED)
   Single source of truth for color, type, spacing, radius, shadow.
   Do not hard-code these values anywhere else. Import this first.
   ============================================================ */

/* ---- Self-hosted fonts (OFL). Place files in /fonts ----
   Convert to .woff2 for production if possible; .ttf also works. */
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Regular.woff2') format('woff2'),url('../fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Bold.woff2') format('woff2'),url('../fonts/Outfit-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Work Sans';src:url('../fonts/WorkSans-Regular.woff2') format('woff2'),url('../fonts/WorkSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('../fonts/WorkSans-Bold.woff2') format('woff2'),url('../fonts/WorkSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/Lora-Italic.woff2') format('woff2'),url('../fonts/Lora-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* ---- Color ---- */
  --cream:#FBF7F0;        /* app background */
  --cream-deep:#F3EADB;   /* secondary surface / muted panel */
  --surface:#FFFFFF;      /* cards */
  --ink:#2E2B27;          /* primary text (warm near-black) */
  --ink-soft:#6F685D;     /* secondary text */
  --ink-faint:#B3A998;    /* hints, placeholders, disabled */
  --sage:#7E9B83;         /* primary accent */
  --sage-deep:#566E5B;    /* accent text on light, emphasis */
  --sage-tint:#E9F0E9;    /* accent background wash */
  --terra:#CB7C5E;        /* secondary accent — use sparingly */
  --terra-deep:#A85F44;
  --terra-tint:#F7E8DF;
  --line:#E4DCCD;         /* hairlines, borders */

  /* Semantic aliases */
  --bg:var(--cream);
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --primary:var(--sage);
  --primary-strong:var(--sage-deep);
  --focus-ring:var(--sage-deep);

  /* ---- Type ---- */
  --font-display:'Outfit',system-ui,sans-serif;   /* headings, wordmark, numbers */
  --font-body:'Work Sans',system-ui,sans-serif;   /* UI + body, high legibility */
  --font-quote:'Lora',Georgia,serif;              /* italic warm lines, encouragement */

  --fs-xs:0.78rem;
  --fs-sm:0.9rem;
  --fs-base:1rem;
  --fs-md:1.18rem;
  --fs-lg:1.5rem;
  --fs-xl:2rem;
  --fs-2xl:2.6rem;
  --fs-timer:5rem;        /* big countdown */
  --lh-tight:1.1;
  --lh-normal:1.5;
  --lh-loose:1.7;

  /* ---- Spacing scale (8pt-ish) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:100px; --r-full:50%;

  /* ---- Shadow (soft, warm) ---- */
  --shadow-sm:0 2px 8px rgba(46,43,39,.06);
  --shadow-md:0 10px 30px rgba(46,43,39,.10);
  --shadow-lg:0 24px 60px rgba(46,43,39,.16);

  /* ---- Layout ---- */
  --app-max:520px;        /* mobile-first content max width */
  --tap-min:44px;         /* minimum touch target */
  --nav-h:64px;           /* bottom nav height */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:180ms;
}

/* Honor reduced motion globally */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Brand ring motif — reuse as logo, favicon source, and timer progress ring.
   <svg viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="46" fill="none" stroke="var(--sage)"  stroke-width="3.2"/>
     <circle cx="50" cy="50" r="30" fill="none" stroke="var(--terra)" stroke-width="3.2"/>
     <circle cx="50" cy="50" r="13" fill="var(--sage-deep)"/>
   </svg>
*/