/* Overdue — design tokens (merged fonts + colors + typography + spacing)
   Derived from the Today dashboard. Warm paper neutrals, ink text,
   muted garden-green for "done/now", clay-red for "overdue". */

/* — Webfonts —
   The UI sans and mono are intentionally system stacks (the product uses
   the platform font). The only shipped webfont is the serif display voice:
   Source Serif 4 (latin subset, variable 400–700), self-hosted. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — Paper (backgrounds) — */
  --paper: #f1eee7;            /* app canvas */
  --paper-raised: #faf8f3;     /* header clusters, hover wells */
  --paper-sunken: #e9e6dd;     /* pressed wells, scrub track */
  --surface-card: #fcfbf7;     /* cards, list panel */
  --surface-input: #ffffff;    /* composer / text inputs */

  /* — Ink (foregrounds) — */
  --ink-1: #232119;            /* primary text */
  --ink-2: #5b574c;            /* secondary text */
  --ink-3: #908b7d;            /* muted labels, small caps */
  --ink-4: #bcb7a9;            /* faint: placeholders, ticks */

  /* — Hairlines & borders — */
  --hairline: #e4e0d4;
  --hairline-strong: #d3cfc1;

  /* — Semantic: overdue (clay red) — */
  --overdue: #bb4434;
  --overdue-strong: #a83a2b;
  --overdue-tint: #f5e2dd;
  --overdue-on-tint: #a44a3a;

  /* — Semantic: done / now (garden green) — */
  --done: #2f6b43;
  --done-strong: #245636;
  --done-tint: #e6ebda;
  --done-on-tint: #5a6b3b;

  /* — Semantic: pinned / starred (amber) — */
  --amber: #d9a13b;
  --amber-tint: #f4ead2;

  /* — Dark pill (selected tab) — */
  --pill-ink: #26241d;
  --pill-ink-text: #f6f4ec;

  /* — Tags & mentions — */
  --tag-neutral-bg: #e9e5da;
  --tag-neutral-text: #7c776a;
  --tag-red-bg: #f3e1dd;
  --tag-red-text: #a4584b;
  --tag-green-bg: #e7ead7;
  --tag-green-text: #6b7142;
  --tag-olive-bg: #ece9d6;
  --tag-olive-text: #7a7544;
  --mention-bg: #dde7f7;
  --mention-text: #3f6bce;

  /* — Brand gradient (logo only; never for UI chrome) — */
  --brand-indigo: #6366f1;
  --brand-cyan: #06b6d4;
  --brand-amber: #f59e0b;
  --brand-gradient: linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-cyan) 55%, var(--brand-amber) 100%);

  /* — Semantic aliases — */
  --surface-page: var(--paper);
  --text-body: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --border-default: var(--hairline);
  --accent-danger: var(--overdue);
  --accent-success: var(--done);
  --focus-ring: rgba(47, 107, 67, 0.35);

  /* — Typography: three voices —
     1. UI sans — system grotesque, quiet and neutral (everything).
     2. Serif display — italic bookish serif for day names & big numerals.
     3. Mono — timestamps, durations, counts. Always tabular. */
  --font-sans: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
  --font-serif: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Sizes */
  --text-2xs: 10px;    /* tiny meta */
  --text-xs: 11px;     /* small-caps labels, stats */
  --text-sm: 12.5px;   /* secondary rows, activity */
  --text-base: 14px;   /* body, todo titles */
  --text-md: 15px;     /* emphasized rows */
  --text-lg: 18px;     /* rare subheads */
  --text-display: 38px;   /* serif day name ("Wed") */
  --text-numeral: 44px;   /* big serif counts ("2") */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Small-caps label recipe: 11px / 600 / +0.08em / uppercase / --ink-3 */
  --label-tracking: 0.08em;
  --label-size: var(--text-xs);
  --label-weight: var(--weight-semibold);

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.45;

  /* Mono details */
  --mono-size: 11.5px;
  --mono-tracking: 0.02em;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-chip: 6px;       /* tag chips, time badges */
  --radius-control: 10px;   /* buttons, inputs */
  --radius-card: 14px;      /* cards, panels, composer */
  --radius-pill: 999px;     /* filter pills, dark tab, avatars */

  /* Shadows — whisper-quiet; the paper does the work */
  --shadow-card: 0 1px 2px rgba(40, 35, 22, 0.05);
  --shadow-raised: 0 1px 3px rgba(40, 35, 22, 0.07), 0 4px 14px rgba(40, 35, 22, 0.05);
  --shadow-overlay: 0 8px 30px rgba(40, 35, 22, 0.14);

  /* Hairline row separators inside lists */
  --row-divider: 1px solid var(--hairline);

  /* Motion — small, quick, no bounce */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* Hit targets */
  --hit-min: 36px;
  --checkbox-size: 20px;
}