/* ============================================================
   yeet — design tokens
   Dates: 15-07-2026 · times 24h · numbers 1.234,56 · Europe/Madrid
   ============================================================ */

:root {
  /* color — light (warm paper) */
  --bg: #F7F4EF;
  --surface: #FFFFFF;
  --surface-2: #EDE7DE;        /* skeleton / inactive fills */
  --ink: #201B14;              /* primary text */
  --ink-2: #5C5346;            /* secondary text */
  --ink-3: #6E6456;            /* tertiary / meta */
  --line: rgba(32, 27, 20, 0.08);
  --check-line: #C9BFB0;       /* checkbox ring */
  --accent: #E05E1F;           /* THE orange. one accent only */
  --accent-text: #B8480F;      /* accent, legible on bg (AA on --bg) */
  --accent-strong: #BC4E10;    /* text-bearing orange fills — white passes AA */
  --tint: #FDF1E9;             /* accent-tinted surface (needs-eyes) */
  --accent-line: rgba(224, 94, 31, 0.28);
  --ok: #4A7A52;               /* done / future due */
  --ok-tint: #EAF1EB;
  --danger: #B3402F;           /* overdue / delete */
  --card-border: rgba(32, 27, 20, 0.05);
  --scrim: rgba(32, 27, 20, 0.45);
  --nav-bg: rgba(247, 244, 239, 0.94);

  /* elevation */
  --shadow-card: 0 1px 2px rgba(32, 27, 20, 0.06);
  --shadow-float: 0 8px 20px rgba(32, 27, 20, 0.30);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.18);

  /* type */
  --font-display: 'Bricolage Grotesque', sans-serif;  /* wordmark + screen titles only */
  --font-ui: 'Schibsted Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;            /* machine facts: dates, lang, source */
  --fs-meta: 11px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-title: 16px;   /* card title */
  --fs-h2: 22px;      /* detail title */
  --fs-h1: 30px;      /* screen wordmark */
  --ls-label: 0.12em; /* group labels */

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;

  /* radii. Values below ~4px (scrubber tracks, switch knobs, focus rings) are
     intrinsic geometry, not scale steps — see DESIGN.md. */
  --r-xs: 6px;    /* small marks: nav icons, skeleton bars */
  --r-sm: 12px;   /* inputs, segments */
  --r-md: 16px;   /* cards, buttons */
  --r-lg: 24px;   /* sheets */
  --r-pill: 999px;

  /* hit targets */
  --tap: 44px;
}

/* Theming, with light stated exactly once (it IS :root above).
   `:not([data-theme="light"])` lets the system-dark block stand down when
   Settings explicitly picks light, so no restatement of the light palette is
   needed. Dark still appears twice — plain CSS can't share one declaration
   block across a media-query boundary — so keep the two dark blocks in sync. */

/* dark — follows system, unless Settings explicitly says light… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191510; --surface: #221D16; --surface-2: #31291F;
    --ink: #F2EDE4; --ink-2: #C9BFAE; --ink-3: #9A9080;
    --line: rgba(242, 237, 228, 0.09); --check-line: #5C5346;
    --accent: #E8622C; --accent-text: #F08A5B; --accent-strong: #BE521F; --tint: #2B211A;
    --accent-line: rgba(232, 98, 44, 0.4);
    --ok: #7FAF86; --ok-tint: #212B22; --danger: #D0705F;
    --card-border: rgba(242, 237, 228, 0.07);
    --scrim: rgba(0, 0, 0, 0.55); --nav-bg: rgba(25, 21, 16, 0.94);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.4);
  }
}

/* …and dark can also be chosen explicitly while the system is light. */
[data-theme="dark"] {
  --bg: #191510; --surface: #221D16; --surface-2: #31291F;
  --ink: #F2EDE4; --ink-2: #C9BFAE; --ink-3: #9A9080;
  --line: rgba(242, 237, 228, 0.09); --check-line: #5C5346;
  --accent: #E8622C; --accent-text: #F08A5B; --accent-strong: #BE521F; --tint: #2B211A;
  --accent-line: rgba(232, 98, 44, 0.4);
  --ok: #7FAF86; --ok-tint: #212B22; --danger: #D0705F;
  --card-border: rgba(242, 237, 228, 0.07);
  --scrim: rgba(0, 0, 0, 0.55); --nav-bg: rgba(25, 21, 16, 0.94);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.4);
}