/* ============================================================
   TOKENS — the one design system for thomasprimard.com
   Warm limestone minimalism · Rubik · terracotta accent

   CANONICAL COPY. This file lives at css/tokens.css and is
   duplicated verbatim to portal/css/tokens.css and
   dashboard/css/tokens.css.

   Why duplicated instead of shared? The three apps deploy to
   three separate Hostinger vhosts, each from its own folder
   (`git archive HEAD:dashboard` puts dashboard/ contents at the
   server root). A file at css/tokens.css therefore never reaches
   the dashboard's or the portal's server — an @import or a
   relative ../css/tokens.css would 404 in production even though
   it works locally.

     npm run sync:tokens    copy this file to the other two apps
     npm run check:tokens   fail loudly if the three have drifted

   EDIT THIS FILE ONLY, then run sync. See docs/design-system.md.
   ============================================================ */

:root {
  /* ---- Neutrals — Mallorcan limestone & clay ---- */
  --cream-50:  #FAF7F2;   /* page background, card surface */
  --cream-100: #F3EDE4;   /* soft fill, recessed surface */
  --cream-200: #E9E1D4;   /* raised surface, quiet chip fill */
  --sand-300:  #D6C9B4;   /* dashed dividers, muted fill */
  --sand-400:  #B8A78C;   /* mid-tone, active card border */

  /* ---- Accent — terracotta ---- */
  --terracotta-500: #B5714C;  /* warm accent */
  --terracotta-600: #8F563A;  /* accent strong / hover */

  /* ---- Ink ---- */
  --ink-900: #1F1C18;     /* near-black, warm */
  --ink-700: #55504A;
  --ink-500: #827C74;     /* muted body */

  /* ---- Semantic (prefer these over raw palette names) ---- */
  --bg: var(--cream-50);            /* page */
  --bg-soft: var(--cream-100);      /* recessed: thumbs, disabled inputs */
  --text: var(--ink-900);           /* headings, primary text */
  --text-body: var(--ink-700);      /* body copy, nav links */
  --text-muted: var(--ink-500);     /* labels, hints, metadata */
  --line: rgba(31, 28, 24, 0.12);   /* every 1px border */
  --accent: var(--terracotta-500);
  --accent-strong: var(--terracotta-600);

  /* ---- Status ---- */
  --status-paid: #5C7A5A;        /* muted green — paid, saved, ok */
  --status-paid-bg: #EAF0E8;
  --status-overdue: #B23B2E;     /* warm red — overdue, error, danger */
  --status-overdue-bg: #F6E7E4;

  /* ---- Washes & rings (named so they stop being magic rgba) ---- */
  --focus-ring: 0 0 0 3px rgba(181, 113, 76, 0.16);  /* terracotta-500 @16% */
  --accent-wash: rgba(181, 113, 76, 0.08);           /* active nav background */
  --hover-wash: rgba(31, 28, 24, 0.04);              /* neutral hover background */
  --scrim: rgba(31, 28, 24, 0.45);                   /* modal overlay */

  /* ---- Gradient ---- */
  --grad-beige-soft: linear-gradient(165deg, var(--cream-100) 0%, var(--cream-50) 55%, var(--cream-200) 100%);

  /* ---- Geometry & motion ---- */
  --radius: 2px;          /* everything square-ish; the brand is sharp corners */
  --radius-pill: 999px;   /* chips, pills, avatars only */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* NOTE — deliberately NOT tokenized here:
   --pad-x  the site caps its gutter at 64px, the portal at 48px. Hoisting it
            would silently move one of them by 16px. It stays app-local until
            the two are reconciled on purpose. See docs/design-system.md.
   Typography scale — no --font-size-* tokens exist yet anywhere; adding them
            is a separate pass, not a rename. Also tracked in the doc. */