/* ==========================================================================
   Chain-It — design tokens, self-hosted fonts, reset.
   Loaded first on every page (app + auth) so the whole product shares one
   visual language. No @import of remote resources; runs under a strict
   'self' CSP.
   ========================================================================== */

/* ---- Self-hosted fonts (see fonts/README.md; SIL OFL 1.1) ---------------- */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/fredoka-latin-300-normal.woff2') format('woff2');}   /* Task 64: the Dawn Threshold's lightweight lines */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fredoka-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/fredoka-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/nunito-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/nunito-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/nunito-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/nunito-latin-800-normal.woff2') format('woff2');}

:root{
  /* ---- Core palette (6 named roles) ---------------------------------- */
  --bg:#e9eef1;          /* calm canvas                     */
  --ink:#4a5560;         /* primary text (soft slate)       */
  --ink-soft:#7c8794;    /* secondary text / captions       */
  --card:#ffffff;        /* surfaces                        */
  --chain-dark:#7f8893;  /* the signature chain (bold here) */
  --accent:#9bd6a3;      /* primary action (calm green)     */
  --accent-shadow:#7cc28a;
  --danger:#a3352b;      /* only for real errors            */

  /* chain mid/light tones */
  --chain-mid:#a7aeb8; --chain-light:#c8cdd5;

  /* ---- Secondary palette: per-screen pastel tints -------------------- */
  --blue:#cfe3f6;   --blue-deep:#9cc6ee;
  --yellow:#fcefb8; --yellow-deep:#f3dc7e;
  --green:#cdeccf;  --green-deep:#9bd6a3;
  --blush:#f9dcd1;  --blush-deep:#f1b9a6;
  --peri:#dadcf4;   --peri-deep:#b4b8ec;
  --mint:#d2eee0;   --mint-deep:#9bdcbe;

  /* ---- Type: Fredoka = display, Nunito = body ----------------------- */
  --font-display:'Fredoka',system-ui,-apple-system,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;
  /* fluid scale, tuned for short landscape phones (vh) with px floors/ceils */
  --fs-display:clamp(30px,7.4vh,60px);
  --fs-title:clamp(15px,3.3vh,21px);
  --fs-body:clamp(12.5px,2.2vh,15px);
  --fs-cap:clamp(10.5px,1.7vh,12.5px);
  --fs-micro:clamp(9px,1.4vh,11px);

  /* ---- Spacing scale (4-based) -------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ---- Radii -------------------------------------------------------- */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;

  /* ---- Minimum touch target ----------------------------------------- */
  --tap:44px;

  /* ---- Motion: named curves + durations ----------------------------- */
  --ease-standard:cubic-bezier(.4,0,.2,1);   /* general UI            */
  --ease-settle:cubic-bezier(.22,1,.36,1);   /* decelerate & settle   */
  --ease-overshoot:cubic-bezier(.34,1.56,.64,1); /* pop / spawn back  */
  --ease-chain:cubic-bezier(.6,-0.02,.24,1.04);  /* weighty travel + slight settle */
  --dur-fast:120ms; --dur-base:240ms; --dur-slow:520ms; --dur-chain:760ms;
}

/* ---- Reset ---------------------------------------------------------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:radial-gradient(120% 120% at 20% 0%, #f4f7f9 0%, var(--bg) 55%, #dfe6ea 100%);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea{font-family:inherit;-webkit-user-select:text;user-select:text;}

/* ---- Accessibility floor: a visible keyboard focus ring everywhere -- */
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px;border-radius:6px;}
/* pointer users don't get the ring, keyboard users always do */

/* ---- Reduced motion: kill drift/physics/transitions globally -------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
}