/*
  Design tokens — the single source of truth for color, spacing, and type.
  Every page/component should reference these custom properties, never hardcode a hex value,
  px size, or font stack directly.

  Theme: "Griffin" v2 — palette, type, buttons, card glow, and icon boxes (see
  ~/Documents/knocturn-design-system/DESIGN-SYSTEM-BRIEF.md + design-tokens.json). Reference:
  griffin.com's visual language (colors/type/spacing/motion only — no copy, logos, or imagery
  reused). Same family as the finance dashboard's own tokens.css, ported here with this app's
  accent: finance = blue, health (this app) = green (color.accent.health in design-tokens.json).

  This is a single fixed palette, not a light/dark pair — Griffin's own reference has no light
  mode, matching the finance dashboard's identical choice. The previous three-tier
  light/media-query-dark/data-theme-dark cascade this file used to have is collapsed to one
  :root block; the inert Settings theme-toggle plumbing (data-theme attribute, the inline
  anti-FOUC bootstrap script, public/js/components/theme.js) is removed from every page as part
  of this same pass — it never had a visible on/off control anywhere in the UI to begin with
  (grep found no caller of theme.js's exported setThemeMode), so there's no user-facing feature
  being taken away, just dead plumbing that would otherwise sit there doing nothing now that
  there's only one palette to switch between.

  Deliberately NOT touched: this app's own --color-body/fuel/movement/mind/care group-accent
  system (sidebar.css and mockup-v2.css depend on it for per-domain wayfinding — Body, Fuel,
  Movement, Mind, Care each get their own hue). That system predates this redesign, isn't part
  of the shared Griffin brief, and stays exactly as it was — just permanently on its old
  dark-mode values now that dark is the only mode. --color-accent is deliberately its own green
  from design-tokens.json's color.accent.health, distinct from --color-body's softer sage —
  generic UI (buttons/links/focus/card glow/icon boxes) and the Body health domain aren't the
  same thing and don't need to share one literal hex.
*/

:root {
  /* ---- Color: background/surface (design-tokens.json color.*, shared by both apps) ---- */
  --color-bg: #0a0a0d;
  --color-surface: #16171b;
  --color-surface-raised: #1c1d22;
  --color-border: #34363d;

  /* ---- Color: text ---- */
  --color-text: #f5f6f8;
  --color-text-muted: #9a9da8;
  /* A second, lighter muted tier — eyebrows/labels/tertiary text that should recede further
     than --color-text-muted's secondary-text role. Not part of design-tokens.json; kept from
     this file's own prior two-tier text-dim/text-faint scale. */
  --color-text-faint: #7186a0;
  /* Text that sits on top of an accent or semantic-colored chip (button, badge) rather than the
     page background — matches --color-bg, since the accent green is light enough for near-black
     text to read clearly on top of it. Same value/reasoning as the finance dashboard's token. */
  --color-text-inverse: #0a0a0d;

  /* Structural parity with the finance dashboard's tokens.v2.css — not used by any rule in this
     app's own CSS, kept only so both apps' token files stay parallel. */
  --color-navy: #7b93c9;
  --color-navy-muted: #16223a;

  /* ---- Color: accent — design-tokens.json color.accent.health, this app's own logo green ----
     Per the v2 brief, this is now the primary interactive color for the whole app, not just a
     button fill: nav active-link underline, every card's ambient glow, every icon box, progress
     bar fills, positive figures, focus rings, links. */
  --color-accent: #46b87c;
  --color-accent-hover: #5fcb90;
  --color-accent-muted: #46b87c22;
  /* The card-glow treatment's box-shadow color — design-tokens.json's color.accent.health.glow. */
  --color-accent-glow: #46b87c40;

  --color-success: #4ade80;
  --color-success-muted: #123423;
  --color-danger: #f87171;
  --color-danger-muted: #3a1414;
  --color-warning: #fbbf24;
  --color-warning-muted: #3a2a0c;

  /* ---- Health-domain group accents — UNCHANGED in hue, now permanently on their old
     dark-mode values since dark is the only mode. Body/Fuel/Movement/Mind/Care wayfinding
     colors; this app's own system, not part of the finance-dashboard port. ---- */
  --color-body: #7ad7b0;
  --color-body-hover: #87efc3;
  --color-body-muted: #27332e;

  --color-fuel: #ca7987;
  --color-fuel-hover: #e18796;
  --color-fuel-muted: #33282a;

  --color-movement: #7ba2bd;
  --color-movement-hover: #89b3d2;
  --color-movement-muted: #292f33;

  --color-mind: #baa0de;
  --color-mind-hover: #ceb1f6;
  --color-mind-muted: #2e2b33;

  --color-care: #e6aa50;
  --color-care-hover: #f7b757;
  --color-care-muted: #332c21;

  /* Categorical chart palette — 1 echoes the brand accent; 2-6 keep echoing the group accents,
     unchanged, so a chart never introduces an unrelated hue. */
  --color-chart-1: #46b87c;
  --color-chart-2: #e6aa50;
  --color-chart-3: #ca7987;
  --color-chart-4: #7ba2bd;
  --color-chart-5: #baa0de;
  --color-chart-6: #94a3b8;

  /* ==================================================================
     SPACING — two explicit tiers (see the finance dashboard's tokens.v2.css for the rationale)
     ================================================================== */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-component-gap: var(--space-sm);
  --space-section-gap: var(--space-2xl);

  /* Backward-compatible aliases — base.css/sidebar.css/voice-quick-add.css reference the old
     --space-1..--space-8 index scale by name; these keep them pixel-identical to tokens.css. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --font-sans: var(--font-body);
  --font-weight-normal: var(--font-weight-regular);

  /* ==================================================================
     RADIUS — role-based
     ================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ==================================================================
     TYPOGRAPHY — per the v2 brief: a light-weight display serif for headings, a grotesk sans
     for body/UI, a mono for labels/buttons/data. Loaded via Google Fonts (Fraunces, Inter,
     JetBrains Mono) in v2-motion.css's @import — Neue Montreal/General Sans/Cambon/Sohne are
     commercial and aren't actually loaded, but stay in the fallback chain per the brief's own
     substitute list, same convention the finance dashboard's tokens.css uses.

     --font-heading/--font-body/--font-mono are the names every existing rule in this app
     already reads (base.css, mockup-v2.css, v2-motion.css) — only the VALUES change here, so
     no consumer needed touching to pick up the new faces.
     ================================================================== */
  --font-heading: 'Fraunces', 'Newsreader', Georgia, serif;
  --font-body: 'Neue Montreal', 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Letter-spacing pairing for the display face, per the brief — mirrors the finance
     dashboard's --tracking-display. */
  --tracking-display: -0.02em;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;
  --text-hero: clamp(3rem, 9vw, 5.5rem);

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
}

@view-transition {
  navigation: auto;
}