/* The redesigned ops app's one source of colour, type and spacing (Oct 8, 2026).

   Build step 1 of docs/plans/OPS_APP_REDESIGN_UX.md: light by default, with a dark look kept as a
   setting (her decisions, October 8, 2026). The UX design system (ai-support-agent
   docs/UX_DESIGN_SYSTEM.md) is written for Tailwind; this file implements its contracts in plain
   CSS: the type scale (3.2) and the 4px grid (4.1). Colours and type are the original ops dashboard's
   (her preference, October 8, 2026): its blue, its grays, Inter, and its red, amber and green for
   overdue, due soon and done.

   Pages link this file and use the variables; nothing here styles a component, so linking it
   changes no existing page until that page opts in.

   Dark: `<html data-theme="dark">`, set by app.js from the saved setting. */

:root {
  color-scheme: light;
  /* Her palette: the original ops dashboard's colours (her preference, October 8, 2026: "make the ops screens
     look as much as the old ops dashboard, the colors, graphs, etc. Those were my preferences."). */
  /* Surfaces and ink */
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-raised: #F9FAFB;
  --ink: #111827;
  --ink-muted: #6B7280;
  --ink-soft: #9CA3AF;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;
  /* Accent: the dashboard's blue */
  --accent: #1E40AF;
  --accent-hover: #1E3A8A;
  --accent-bright: #3B82F6;
  --accent-soft: #EFF6FF;
  --on-accent: #FFFFFF;
  /* Severity: three colours, each with a soft fill for rows and chips */
  --broken: #DC2626;        /* red: broken or overdue */
  --broken-soft: #FEF2F2;
  --needs-you: #B45309;     /* amber: needs you */
  --needs-you-soft: #FFFBEB;
  --working: #16A34A;       /* green: working, money in */
  --working-soft: #F0FDF4;
  /* The rail: the old dashboard's blue bar */
  --rail-bg: #1E40AF;
  --rail-ink: rgba(255, 255, 255, .78);
  --rail-ink-strong: #FFFFFF;
  --rail-active: rgba(255, 255, 255, .16);
  --rail-heading: rgba(255, 255, 255, .55);
  --rail-line: rgba(255, 255, 255, .18);
  /* Focus */
  --focus: #3B82F6;

  /* Type: Inter, as the old dashboard, with the system stack behind it */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-page: 600 20px/1.4 var(--font);       /* page title, one per page */
  --text-section: 600 16px/1.5 var(--font);    /* section title */
  --text-card: 600 14px/1.43 var(--font);      /* card title, subsection */
  --text-body: 400 14px/1.43 var(--font);      /* body, inputs, table cells */
  --text-small: 400 12px/1.5 var(--font);      /* metadata, helper text */
  --text-label: 500 14px/1.43 var(--font);     /* form labels */
  --text-badge: 500 12px/1.5 var(--font);      /* badges, column headers */
  --text-code: 400 13px/1.54 var(--font-mono);

  /* Spacing: the 4px grid (UX design system 4.1) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  /* Shape: the old dashboard's 10px cards */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 12px; --radius-pill: 999px;
  --touch: 44px;     /* minimum touch target on the phone */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;
  --surface: #111A2E;
  --surface-raised: #17223A;
  --ink: #E5E7EB;
  --ink-muted: #9CA3AF;
  --ink-soft: #6B7280;
  --line: #24304A;
  --line-strong: #33415E;
  --accent: #60A5FA;
  --accent-hover: #93C5FD;
  --accent-bright: #60A5FA;
  --accent-soft: rgba(96, 165, 250, .14);
  --on-accent: #0B1220;
  --broken: #F87171;
  --broken-soft: rgba(248, 113, 113, .13);
  --needs-you: #FBBF24;
  --needs-you-soft: rgba(251, 191, 36, .13);
  --working: #4ADE80;
  --working-soft: rgba(74, 222, 128, .13);
  --rail-bg: #0F1A33;
  --focus: #93C5FD;
}

/* The only rule here: a focus ring every interactive element shows, in both looks. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }