/*
  Design tokens — the single source of truth for color, spacing, and type. Ported from the
  finance dashboard (public/css/tokens.css there) so both apps share the same flat-canvas,
  hairline-border look and feel. Every page/component should reference these custom properties,
  never hardcode a hex value, px size, or font stack directly.

  What changed from the finance dashboard: the accent is sage green (sampled from this app's
  recolored logo, public/img/logo.png) instead of blue, and five extra "group" accent families
  were added — one per sidebar group (Body/Fuel/Movement/Mind/Care) — so each cluster of nav
  items and its pages can carry its own identity color. Everything else (spacing, radius,
  shadow, type scale, motion) is unchanged.
*/

:root {
  /* ---- Color: background/surface ---- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #fbfcfd;
  --color-border: #e5e7eb;

  /* ---- Color: text ---- */
  --color-text: #0a0a0a;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* ---- Color: accent / semantic ---- */
  /* Sage green — sampled from this app's logo mark (public/img/logo.png). Doubles as the Body
     group's accent (see --color-body below, same value) since Body/Overview is the app's
     default/home context. */
  --color-accent: #5fa88a;
  --color-accent-hover: #6abc9a;
  --color-accent-muted: #d3f0e4;

  --color-success: #16a34a;
  --color-success-muted: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-muted: #fee2e2;
  --color-warning: #d97706;
  --color-warning-muted: #fef3c7;

  /* ---- Color: sidebar group accents ---- */
  /* One family per nav group — base/hover/muted, same three-tier shape as --color-accent above.
     Used by sidebar.css (active link + group label) and by each group's pages for headers,
     badges, and chart accents once they have real data. */
  --color-body: #5fa88a;
  --color-body-hover: #6abc9a;
  --color-body-muted: #d3f0e4;

  --color-fuel: #9e5f69;
  --color-fuel-hover: #b16a76;
  --color-fuel-muted: #f0d5d9;

  --color-movement: #607e94;
  --color-movement-hover: #6c8da6;
  --color-movement-muted: #d8e6f0;

  --color-mind: #917dad;
  --color-mind-hover: #a28cc2;
  --color-mind-muted: #e5ddf0;

  --color-care: #c79346;
  --color-care-hover: #dfa54e;
  --color-care-muted: #f0dec4;

  /* Categorical palette for future chart cards — one hue per slice/bar/line. 1 echoes the
     primary accent; 2–6 borrow the group accents so a chart never introduces an unrelated hue. */
  --color-chart-1: #5fa88a;
  --color-chart-2: #c79346;
  --color-chart-3: #9e5f69;
  --color-chart-4: #607e94;
  --color-chart-5: #917dad;
  --color-chart-6: #64748b;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---- Radius / elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.03);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.06);

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-hero: clamp(2.75rem, 9vw, 4.75rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
}

/* System-preference dark mode — only applies when nothing's been explicitly chosen (see
   public/js/components/theme.js). An explicit light choice always beats the OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #06111c;
    --color-surface: #0d1b29;
    --color-surface-raised: #112236;
    --color-border: #16283a;

    --color-text: #ffffff;
    --color-text-muted: #7ea3bc;
    --color-text-inverse: #06111c;

    --color-accent: #7ad7b0;
    --color-accent-hover: #87efc3;
    --color-accent-muted: #27332e;

    --color-success: #22c55e;
    --color-success-muted: #14321f;
    --color-danger: #ef4444;
    --color-danger-muted: #3a1a1a;
    --color-warning: #f59e0b;
    --color-warning-muted: #3a2c0f;

    --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;

    --color-chart-1: #7ad7b0;
    --color-chart-2: #e6aa50;
    --color-chart-3: #ca7987;
    --color-chart-4: #7ba2bd;
    --color-chart-5: #baa0de;
    --color-chart-6: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
}

/* An explicit "Dark" choice — wins regardless of OS setting. Same values as the media query
   above, duplicated rather than shared because a media query can't be re-entered from an
   attribute selector. */
:root[data-theme="dark"] {
  --color-bg: #06111c;
  --color-surface: #0d1b29;
  --color-surface-raised: #112236;
  --color-border: #16283a;

  --color-text: #ffffff;
  --color-text-muted: #7ea3bc;
  --color-text-inverse: #06111c;

  --color-accent: #7ad7b0;
  --color-accent-hover: #87efc3;
  --color-accent-muted: #27332e;

  --color-success: #22c55e;
  --color-success-muted: #14321f;
  --color-danger: #ef4444;
  --color-danger-muted: #3a1a1a;
  --color-warning: #f59e0b;
  --color-warning-muted: #3a2c0f;

  --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;

  --color-chart-1: #7ad7b0;
  --color-chart-2: #e6aa50;
  --color-chart-3: #ca7987;
  --color-chart-4: #7ba2bd;
  --color-chart-5: #baa0de;
  --color-chart-6: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Cross-document view transitions — same as the finance dashboard. */
@view-transition {
  navigation: auto;
}