/* Se2L design tokens — v4.
   Direction: matched to reference screens supplied by the user (UK Arrival
   Guide style) — warm cream background, a confident deep navy as the
   primary UI color (headers, primary buttons, dark feature cards), and a
   fresh mint green as the secondary "positive/in-progress" accent. Bold
   grotesk headings rather than a serif — this reference reads as a
   confident modern product, not a document or a wellness app. */

:root {
  /* Dark navy sidebar tokens — used only within .app-sidebar/.mobile-topbar.
     Kept separate from the main light-background text tokens above since
     they need the opposite contrast direction (light text on dark navy,
     not dark text on light surfaces). */
  --sidebar-bg: var(--color-navy);
  --sidebar-text: rgba(255, 255, 255, 0.82);
  --sidebar-text-muted: rgba(255, 255, 255, 0.55);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.15);
  --sidebar-card-bg: rgba(255, 255, 255, 0.08);
  --sidebar-mark-bg: rgba(255, 255, 255, 0.14);

  --color-bg: #faf6f1;            /* warm cream page background */
  --color-surface: #ffffff;
  --color-surface-muted: #f2ede5;
  --color-text: #161f3d;          /* near-navy ink for body text/headings */
  --color-text-secondary: #5c6178;
  --color-text-muted: #656b7d;    /* WCAG AA fix: was #9096a8 (2.7-3.0:1, fails); this passes 4.5:1+ on bg/surface/surface-muted */
  --color-border: #ece6da;
  --color-backdrop: rgba(15, 26, 68, 0.4);

  --color-navy: #0f1a44;          /* primary — dark CTAs, headers, active nav */
  --color-navy-dark: #0a1230;
  --color-navy-bg: #e7e9f2;       /* pale navy tint for badges/tags */

  --color-accent: #2fae63;        /* mint/emerald — secondary accent: "in progress", positive states, links on dark */
  --color-accent-dark: #22824a;
  --color-accent-bg: #d9f2e2;     /* pale mint tint — badges, active sidebar item */
  --color-accent-light: #bfe8cd;

  --color-brass: #7a5d28;         /* WCAG AA fix: was #c99a52 (2.17:1 on brass-bg, fails); this passes 5.22:1 */
  --color-brass-bg: #f5ecd8;

  --color-critical: #c1483a;
  --color-critical-bg: #f7ddd8;
  --color-warning: #7a5d28;       /* same fix as brass — they share one hue */
  --color-warning-bg: #f5ecd8;
  --color-important: #7a5d28;

  --color-success: #2fae63;
  --color-success-dark: #22824a;
  --color-success-bg: #d9f2e2;

  --color-video-bg: #0f1a44;
  --color-video-text-muted: #9096a8;

  --font-heading: 'Manrope', sans-serif;   /* bold confident grotesk, not a serif — reads as product, not document */
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius-card: 1rem;             /* 16px — matches the reference card rounding */
  --radius-control: 0.65rem;
}

/* Tailwind's utility classes (bg-slate-50, text-slate-900, etc.) still
   sit directly on <body> in every page and win over a plain "body {}"
   rule on specificity. These !important overrides are the deliberate
   exception — this file is the single place color/type changes should
   happen, so it's allowed to out-rank the old hardcoded utility classes
   it's replacing. */
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}
h1, h2, h3 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

/* Color sweep — recolors the existing Tailwind utility classes already
   present in every HTML file and JS template string to the new palette.
   Nothing in the HTML or JS is edited or renamed; this only changes what
   these class names render as, so JS logic that adds or removes these
   exact class names (e.g. task-detail.js toggling bg-slate-900 /
   bg-green-600 on the "mark complete" button) keeps working exactly as
   before — only the resulting color changes. */

.bg-white { background-color: var(--color-surface) !important; }
.bg-slate-50 { background-color: var(--color-bg) !important; }
.bg-slate-100 { background-color: var(--color-surface-muted) !important; }
.bg-slate-900 { background-color: var(--color-navy) !important; }
.text-slate-400 { color: var(--color-text-muted) !important; }
.text-slate-500 { color: var(--color-text-secondary) !important; }
.text-slate-600 { color: var(--color-text-secondary) !important; }
.text-slate-700 { color: var(--color-text) !important; }
.text-slate-900 { color: var(--color-text) !important; }
.border-slate-200 { border-color: var(--color-border) !important; }
.border-slate-300 { border-color: var(--color-border) !important; }

.bg-indigo-50 { background-color: var(--color-navy-bg) !important; }
.text-indigo-600 { color: var(--color-navy) !important; }
.text-indigo-700 { color: var(--color-navy) !important; }
.border-indigo-200 { border-color: var(--color-navy-bg) !important; }
.border-indigo-600 { border-color: var(--color-navy) !important; }

.bg-red-50 { background-color: var(--color-critical-bg) !important; }
.text-red-600 { color: var(--color-critical) !important; }
.text-red-700 { color: var(--color-critical) !important; }
.border-red-200 { border-color: var(--color-critical-bg) !important; }
.border-red-600 { border-color: var(--color-critical) !important; }

.bg-amber-50 { background-color: var(--color-warning-bg) !important; }
.text-amber-500 { color: var(--color-warning) !important; }
.text-amber-600 { color: var(--color-warning) !important; }
.text-amber-700 { color: var(--color-warning) !important; }

.bg-green-50 { background-color: var(--color-success-bg) !important; }
.bg-green-600 { background-color: var(--color-success) !important; }
.text-green-600 { color: var(--color-success) !important; }
.text-green-700 { color: var(--color-success-dark) !important; }
.border-green-600 { border-color: var(--color-success) !important; }