/**
 * tokens.css: THE HUB'S DESIGN TOKENS, THE ONE SOURCE OF THEIR VALUES (SYS-146, 3 Oct 2026; DESIGN.md is the guide).
 *
 * Only custom properties on :root, nothing else, so it is safe on every page: the shell loads it once, in
 * shell/app-shell.html, before any page style, and design-tokens.css (the Refined Apple components, D-036) imports it.
 * shell.js's older names are aliases of these (--ctn is --brand, --muted is --text-secondary, --text is --text-primary).
 *
 * Changing a value here changes it everywhere. Matt's decisions of 3 Oct 2026 (canvas boards N, O, P): brand red
 * #E11D2E for brand, alerts and destructive only; actions in ink, semibold; background #F5F5F7; destructive #C41828;
 * secondary text #6E6E73. Not covered here: the AI identity (shared/ai-identity.css, D-213), storefront themes and
 * customer-facing emails, which keep their own.
 *
 * SITE THEMES (SYS-146 stage 2, 4 Oct 2026): another site that uses these tokens loads its theme after this file, and
 * the theme sets only the three brand values (--brand, --on-brand, --brand-tint) and, where its brand sits near a status
 * colour, that status colour. The hub's own brand is the default here, so the hub loads no theme. themes/<site>.css;
 * DESIGN.md, "Site themes". The event hub copies this file at deploy, and a test holds the copy to it byte for byte.
 * No em dashes anywhere in this file (the event hub's dash gate reads its copy).
 */
:root {
  /* SF Pro via -apple-system stack is native on macOS/iOS; fallback to
     Inter / system UI on other platforms. NEVER load SF Pro from CDN:
     it's Apple-licensed and a CDN variant would be a trademark issue. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* Brand red (Matt, 3 Oct 2026, boards N and O): brand, alerts and destructive only, never an ordinary action.
     --accent is its older name and stays an alias of it. The storefront configurator reads --accent for its own accent. */
  --brand: #E11D2E;
  /* Stage 2 (Matt's per-site brand, 4 Oct 2026): what sits on a brand fill, and the brand's light tint. A site theme sets
     all three; a text never takes --brand on a site whose brand is too light to read (the event hub's copper). */
  --on-brand: #FFFFFF;
  --brand-tint: #FEF2F3;
  --accent: var(--brand);
  --accent-hover: #C41828;
  --accent-soft: var(--brand-tint);
  --accent-muted: #FBE3E6;

  /* Semantic colors, shared across themes. */
  --success: #30D158;
  --success-soft: #E8F9EC;
  --success-border: #BEE9CB;
  --success-text: #0D7D2A;

  --warning: #FF9F0A;
  --warning-soft: #FFF4E0;
  --warning-border: #FFD9A3;
  --warning-text: #9A6100;

  /* Destructive (Matt, 3 Oct 2026): 6.0:1 with white text. --danger is the older, lighter red, kept for what uses it. */
  --destructive: #C41828;
  --danger: #FF453A;
  --danger-soft: #FFE8E7;
  --danger-border: #FFD0CD;

  /* Purple (used for AI gradients + audit merge events). */
  --purple: #5A1C9E;
  --purple-soft: #F2E8FF;
  --purple-border: #D9C1FF;

  /* Surface palette. The page background is #F5F5F7 everywhere (Matt, 3 Oct 2026; it was #FBFBFD here and #f5f5f7 in the
     shell, so the frame changed shade between pages). */
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-hover: #F5F5F7;
  --border: #E5E5EA;
  --border-subtle: #F0F0F4;

  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #A1A1A6;

  /* Actions (Matt, 3 Oct 2026, board O): links and text actions are ink and semibold, with an arrow when they go
     somewhere, underlined inside a sentence, and a highlight behind them on hover. One filled button per screen, ink. */
  --action: var(--text-primary);
  --action-weight: 600;
  --action-hover: rgba(0, 0, 0, 0.05);

  /* Buttons (Matt, 4 Oct 2026, board Q): one filled button per screen, in ink, for the action that finishes what you are
     doing; every other button is outline. Delete is never the filled button on a page: it is destructive text, and only a
     "Delete this?" confirmation fills it, in --destructive with white. AI actions keep the AI identity (D-213). */
  --button-fill: var(--action);
  --button-fill-hover: #3A3A3C;
  --on-button-fill: #FFFFFF;
  --button-outline: #D1D1D6;
  --toggle-on: rgba(0, 0, 0, 0.08);

  /* Lines and focus. */
  --separator: var(--border);
  --focus-ring: 2px solid var(--text-primary);
  --focus-offset: 2px;

  /* Spacing, on a 4px grid. */
  --space-xs: 4px;
  --space-s:  8px;
  --space-m:  16px;
  --space-l:  24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Radius scale. --radius-sm is 6px everywhere (the shell had 7px). */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* The grouped list (SYS-140; Apple Settings' inset grouped list): its corners and its row height. */
  --list-radius: var(--radius-md);
  --list-row-height: 44px;

  /* Elevation: subtle on Apple surfaces; avoid heavy shadows. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);

  /* Page layout. */
  --page-pad: 32px;

  /* Typography scale (px). */
  --type-page-title: 34px;
  --type-hero-name:  34px;
  --type-title-2:    22px;
  --type-card-title: 15px;
  --type-body:       15px;
  --type-meta:       13px;
  --type-label:      11px;

  /* Motion. */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Mobile (D-058): breakpoints, tap targets and the mobile spacing scale. */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --tap-target-min: 44px;
  --tap-target-comfortable: 48px;
  --space-mobile-page:    16px;
  --space-mobile-section: 20px;
}