/* CleoCafe design tokens — the only place colours, fonts and sizes are defined.
   Everything else (components.css, screens/*.css, JS templates) uses these
   variables, so a change here restyles the whole app. Dark mode follows the
   device setting. Palette: "chalkboard menu" — board, paper, chalk. */

@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-800-normal.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cabin Sketch";src:url("../fonts/cabin-sketch-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* surfaces */
  --board:#2E3532;          /* header, navigation, page-title strip */
  --board-2:#3A423E;        /* hover / raised on the board */
  --board-line:rgba(250,247,240,.12);
  --on-board:#F3EFE4;       /* text on the board */
  --on-board-muted:#AEB5AF;
  --paper:#FAF7F0;          /* page background */
  --surface:#FFFFFF;        /* panels, rows, inputs */
  --surface-2:#F2EEE4;      /* subtle fill: table heads, hovered rows */
  --line:#E4DED1;
  --line-strong:#CFC7B6;
  --input-border:#8F8676;   /* form field edges: 3:1 against white (WCAG 1.4.11) */

  /* text */
  --ink:#26302C;
  --ink-2:#4A5550;
  --muted:#646C67;          /* 4.6:1+ on paper, surface and surface-2 (WCAG AA) */

  /* accents */
  --chalk:#E9C46A;          /* primary accent: active nav, highlights */
  --chalk-ink:#2E3532;      /* text on chalk */
  --chalk-soft:#F6E9C4;
  --mint:#367156;           /* good / on target — text colours here are all ≥4.5:1 */
  --mint-soft:#DCEDE4;
  --brick:#A8402A;          /* alerts / below target */
  --on-brick:#FFFFFF;       /* text on a brick fill (danger buttons, counts) */
  --brick-soft:#F5DDD6;
  --amber:#87590F;          /* warnings */
  --amber-soft:#F5E6CC;
  --focus:#26302C;          /* dark ring on paper; board areas use --focus-board */
  --focus-board:#E9C46A;

  /* action colour (buttons) */
  --action:#2E3532;
  --action-hover:#3A423E;
  --on-action:#FAF7F0;

  /* type */
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-chalk:"Cabin Sketch","Nunito",cursive;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14.5px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px;

  /* shape + space */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --shadow-sm:0 1px 2px rgba(38,48,44,.06);
  --shadow-md:0 6px 20px rgba(38,48,44,.10);

  /* layout */
  --header-h:58px;
  --nav-w:220px;
  --bottom-h:62px;

  /* paper grain: a whisper of noise so the background isn't flat plastic */
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Older names still used inside screen scripts until each screen is
     redesigned (Stages 2–7). Map them onto the new palette. */
  --forest:var(--board); --forest-2:var(--board-2);
  --cream:var(--paper); --cream-2:var(--surface-2);
  --clay:var(--brick); --clay-soft:var(--brick-soft);
  --leaf:var(--mint); --ok:var(--mint); --warn:var(--amber);
  --danger:var(--brick); --danger-soft:var(--brick-soft);
  --font-text:var(--font); --font-num:var(--font);
  --shadow:var(--shadow-sm);
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --board:#171B19;
    --board-2:#232926;
    --board-line:rgba(243,239,228,.10);
    --on-board:#EDE8DC;
    --on-board-muted:#98A09A;
    --paper:#1D2220;
    --surface:#262C29;
    --surface-2:#2E3531;
    --line:#39413D;
    --line-strong:#4A534E;
    --input-border:#6E7872;

    --ink:#ECE7DB;
    --ink-2:#C8C3B7;
    --muted:#999F99;

    --chalk:#E9C46A;
    --chalk-ink:#1D2220;
    --chalk-soft:#4A4230;
    --mint:#7DBB9C;
    --mint-soft:#27392F;
    --brick:#EE9A85;
    --on-brick:#1D2220;
    --brick-soft:#46302A;
    --amber:#E0A955;
    --amber-soft:#443822;
    --focus:#E9C46A;
    --focus-board:#E9C46A;

    --action:#E9C46A;
    --action-hover:#F1D38A;
    --on-action:#1D2220;

    --shadow-sm:0 1px 2px rgba(0,0,0,.30);
    --shadow-md:0 8px 24px rgba(0,0,0,.40);
    --paper-grain:none;
  }
}