/* ============================================================
   Steel City Codes — Design Tokens (light-only)
   Source of truth for color, type, shape, elevation, motion.
   Never hardcode a hex in a component — reference a token here.
   ============================================================ */

:root {
  /* --- surfaces & ink --- */
  --bg:#FAF6EF;
  --surface:#FFFFFF;
  --surface-sunken:#F2ECE2;
  --ink:#262019;
  --ink-muted:#6D6153;   /* AA on bg + surface-sunken */
  --ink-faint:#9C8F7E;
  --border:#E6DFD3;
  --border-strong:#CFC6B8;

  /* --- brand --- */
  --brand:#F1C446;
  --brand-hover:#E7B62C;
  --brand-soft:#FCEFC4;
  --on-brand:#1A1613;
  --ink-bar:#1A1613;          /* near-black bar / dark bands */
  --ink-bar-2:#241E17;        /* slightly lifted dark surface */
  --on-dark:#F5EFE4;          /* text on dark */
  --on-dark-muted:#C9BFB0;
  --ring:#E7B62C;

  /* --- status --- */
  --success-soft:#C2E6C9; --success:#1E7A3E;
  --warning-soft:#FAE1A1; --warning:#775E0D;
  --danger-soft:#F6D5D2;  --danger:#B42318;
  --info-soft:#CEDDE8;    --info:#2D5E83;

  /* --- accent pastels (brand family; category tints) --- */
  --accent-apricot:#FFCDA4;
  --accent-rose:#E4A9A8;
  --accent-lavender:#DBBFDD;
  --accent-sky:#CEDDE8;
  --accent-green:#C2E6C9;

  /* --- shape & elevation --- */
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(38,32,25,.06),0 1px 3px rgba(38,32,25,.05);
  --shadow-md:0 2px 6px rgba(38,32,25,.07),0 6px 16px rgba(38,32,25,.06);
  --shadow-lg:0 8px 28px rgba(38,32,25,.12);
  --shadow-xl:0 20px 50px rgba(38,32,25,.18);

  /* --- motion --- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.5s;

  /* --- type --- */
  --font-sans:"Josefin Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-slab:"Josefin Slab",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* --- layout --- */
  --wrap:1140px;
  --wrap-narrow:760px;
  --gutter:24px;
  --header-h:72px;

  /* --- spacing scale --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
}