/* ==========================================================================
   SWITCHBOARD — DESIGN TOKENS
   Source of truth: Switchboard_Brand_Style_Guide.docx, Section 10.1
   Import this file once per app. Never hardcode a hex value in app code —
   reference these custom properties instead, so a future palette change
   happens in this one file (Section 10.1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORE TOKENS — verbatim from Section 10.1 of the brand guide.
   Do not edit these without bumping the brand guide's version number first
   (Section 10.5) and updating the source document.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  --sb-surface-base: #242424;
  --sb-surface-card: #2E2E2E;
  --sb-surface-raised: #343434;
  --sb-border: #3D3D3D;
  --sb-border-soft: #333333;
  --sb-text-primary: #F0F0F0;
  --sb-text-secondary: #AAAAAA;
  --sb-text-muted: #686868;
  --sb-accent-primary: #7C9FFF;
  --sb-accent-primary-dim: rgba(124,159,255,0.13);
  --sb-accent-positive: #4ECBA0;
  --sb-accent-positive-dim: rgba(78,203,160,0.12);
  --sb-accent-warning: #F0A742;
  --sb-accent-warning-dim: rgba(240,167,66,0.12);
  --sb-accent-negative: #E06C6C;
  --sb-accent-negative-dim: rgba(224,108,108,0.12);
  --sb-radius-sm: 6px;
  --sb-radius-md: 8px;
  --sb-radius-lg: 10px;
}

:root[data-theme="light"] {
  --sb-surface-base: #FAFAFA;
  --sb-surface-card: #FFFFFF;
  --sb-surface-raised: #F2F2F2;
  --sb-border: #E0E0E0;
  --sb-text-primary: #111111;
  --sb-text-secondary: #5A5A5A;
  --sb-text-muted: #999999;
  --sb-accent-primary: #4A6FE0;
  --sb-accent-positive: #2EA37C;
  --sb-accent-warning: #C77F1E;
  --sb-accent-negative: #C24545;
}

/* --------------------------------------------------------------------------
   2. EXTRAPOLATED TOKENS — not verbatim in Section 10.1, but derived directly
   from rules stated elsewhere in the guide. Flagged so it's clear these are
   inferred, not pasted from the source doc. Revisit if the guide is ever
   updated to define these explicitly.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  /* Section 5.5 references border.soft as "a slightly dimmer divider than
     the header border" — dark mode goes #3D3D3D border -> #333333 soft
     (one step down). Applying the same logic to light mode's #E0E0E0. */
  --sb-border-soft: #EAEAEA;

  /* Section 3.4 / 5.3: accent tints (12-18% opacity) apply identically in
     light mode for badges and status backgrounds. Same accent hues as
     Section 3.5's light-mode accent table, same opacity as dark mode. */
  --sb-accent-primary-dim: rgba(74,111,224,0.13);
  --sb-accent-positive-dim: rgba(46,163,124,0.12);
  --sb-accent-warning-dim: rgba(199,127,30,0.12);
  --sb-accent-negative-dim: rgba(194,69,69,0.12);
}

:root {
  /* Section 9: per-app brand-dot colors. Not part of the semantic accent
     system (Section 3.3) — used only for an app's identity dot in nav. */
  --sb-brand-purple: #B388FF;   /* Caption */
  --sb-brand-teal: #2BAE9E;     /* qBittorrent + Gluetun */
  --sb-brand-scout: #FF7043;    /* Scout — security/alert orange-red */
  --sb-brand-harbor: #6AA3DF;   /* Harbor — steel-blue dock theme */
  --sb-brand-reports: #7C6AF0;  /* Reports — indigo/violet, distinct from all existing brand dots */
  --sb-brand-music: #FF4FA3;    /* Music — music/streaming, distinct pink from all existing brand dots */
  --sb-brand-requests: #D9B44A; /* Requests — warm gold/wishlist tone, distinct from all existing brand dots */
  --sb-brand-media: #E5484D;    /* Media — marquee red, distinct from the softer accent-negative coral and Scout's orange-red */
  --sb-brand-tv: #29B6F6;       /* TV — sky blue, matches the mobile app's TV tile dot exactly (same value, not independently picked) */
  --sb-brand-photos: #8FA05E;  /* Photos — moss/olive, distinct hue from every existing brand dot */
  --sb-brand-digitize: #C97B4A; /* Digitize — warm terracotta, distinct hue from every existing brand dot */

  /* ------------------------------------------------------------------
     METRIC IDENTITY COLORS — not in the brand guide. Added to support
     an optional "identity color mode" for metric tiles (icon/label only,
     never the delta line, which stays strictly semantic per Section 3.4).
     Chosen to be visually distinct from all four semantic accents
     (#7C9FFF, #4ECBA0, #F0A742, #E06C6C) and the two existing brand-dot
     colors above, so identity coloring can never be misread as a status
     signal. This is a deliberate, documented extension of Section 9's
     "one-off colors are fine for identity, never for meaning" principle,
     applied to metrics instead of apps. Feature is gated by a dev flag
     until a real Settings page exists — see apps/pulse/index.html.
     ------------------------------------------------------------------ */
  --sb-metric-cpu: #5EC8E8;     /* cool cyan-blue */
  --sb-metric-memory: #C792EA; /* soft violet */
  --sb-metric-disk: #E89A5E;    /* warm clay/orange */
  --sb-metric-network: #8FD45E; /* lime green */
  --sb-metric-temp: #E8729E;    /* warm rose/magenta */
  --sb-metric-gpu: #E8D65E;     /* warm gold - distinct hue from all metrics above */

  /* Section 4.1 — typeface stacks */
  --sb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sb-font-mono: "JetBrains Mono", monospace;

  /* Section 4.3 — type scale (size / line-height set per-use, see guide) */
  --sb-text-display: 28px;
  --sb-text-h1: 22px;
  --sb-text-h2: 18px;
  --sb-text-h3: 16px;
  --sb-text-body: 14px;
  --sb-text-body-sm: 12px;
  --sb-text-metric-compact: 20px;
  --sb-text-metric-standalone: 24px;
  --sb-text-caption: 11px;
  --sb-text-micro: 10px;
  --sb-text-button: 13px;
  --sb-text-badge: 10px;

  /* Section 4.3 — only two weights exist in the system */
  --sb-weight-regular: 400;
  --sb-weight-medium: 500;

  /* Section 5.1.2 — button sizing */
  --sb-btn-height-default: 36px;
  --sb-btn-height-compact: 28px;
  --sb-btn-radius-default: 8px;
  --sb-btn-radius-compact: 6px;

  /* Section 5.2 — form element sizing */
  --sb-input-height: 36px;
  --sb-input-radius: 6px;

  /* Section 6.1 — top nav bar height */
  --sb-topbar-height: 43px; /* midpoint of documented 42-44px */

  /* Section 6.2 — sidebar width */
  --sb-sidebar-width: 145px; /* midpoint of documented 140-150px */

  /* Section 8.4 — responsive breakpoints */
  --sb-breakpoint-tablet: 768px;
  --sb-breakpoint-desktop: 1280px;
}

/* --------------------------------------------------------------------------
   3. GLOBAL BASE STYLES
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  /* Section 10.3: theme attribute read before first paint to avoid a
     flash of the wrong theme. Default to dark per Section 3: "dark is
     the primary, designed-first experience." */
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--sb-surface-base);
  color: var(--sb-text-primary);
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-body);
  font-weight: var(--sb-weight-regular);
  line-height: 1.4;
  /* Section 4.5: tabular numerals enabled globally so columns of numbers
     align — tables/metric grids rely on this. */
  font-feature-settings: "tnum";
}

/* Section 4.3: never use 600, 700, or bold-italic anywhere in the system. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--sb-weight-medium);
  line-height: 1.25; /* Section 4.4: headings 1.2-1.3 */
  margin: 0;
}

p {
  line-height: 1.65; /* Section 4.4: paragraphs 1.6-1.7 */
  margin: 0;
}

/* Section 4.5: monospace reserved exclusively for literal technical values —
   never general UI text or numeric table data. Apply this class explicitly,
   do not default body text to mono. */
.sb-mono {
  font-family: var(--sb-font-mono);
}