/* ============================================================
   Shooting Diary — design tokens (direction 1a "Refined utility")
   Dark is the default theme; light overrides via [data-theme="light"].
   Fonts: IBM Plex Sans (UI) + IBM Plex Mono (numerals, dates, counts).
   Bundle both as woff2 (weights 400/500/600/700 sans; 400/500/600 mono)
   — no CDN at runtime.
   ============================================================ */

:root {
  /* ---- type ---- */
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --text-xs: 11px;      /* uppercase section labels, chips meta */
  --text-sm: 12.5px;    /* secondary text, chips, toolbar */
  --text-base: 13.5px;  /* body, table rows */
  --text-md: 15.5px;    /* card titles */
  --text-lg: 20px;      /* page titles */
  --text-xl: 26px;      /* stat-tile figures (mono) */
  --leading-body: 1.55;
  --tracking-label: 0.08em;  /* + uppercase for section labels */

  /* ---- spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- radius ---- */
  --r-sm: 6px;    /* buttons, inputs, small controls */
  --r-md: 10px;   /* cards, panels */
  --r-lg: 16px;   /* sheets, FAB */
  --r-full: 999px;/* chips, toggles, filter pills */

  /* ---- elevation ---- */
  --shadow-card: 0 1px 3px rgba(0,0,0,.25);
  --shadow-raised: 0 6px 18px rgba(0,0,0,.45);   /* FAB, sheets, menus */

  /* ---- control sizing ---- */
  --control-h: 40px;       /* desktop buttons/inputs */
  --control-h-mobile: 48px; /* mobile tap targets (min 44px) */

  /* ============ DARK (default) ============ */
  --bg: #14181b;             /* page background */
  --surface: #1a2024;        /* cards, panels */
  --surface-2: #242b30;      /* nested rows, input backgrounds */
  --topbar: #171c1f;         /* top navbar / bottom tab bar */
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --divider: rgba(255,255,255,.05);

  --text: #e8ecee;           /* primary text */
  --text-2: #9aa5ab;         /* secondary */
  --text-3: #647077;         /* tertiary / labels */

  --accent: #2e7d54;         /* primary button bg (green) */
  --accent-hover: #35905f;
  --on-accent: #eef7f1;
  --accent-fg: #8fcaa9;      /* green text/icons on dark */
  --accent-soft: rgba(87,167,124,.14);   /* selected chip/nav bg */
  --accent-border: rgba(87,167,124,.35);

  --warn: #c78f4a;           /* malfunctions > 0 */
  --danger: #c0605c;         /* delete mode */
  --danger-soft: rgba(192,96,92,.14);
  --focus-ring: 0 0 0 3px rgba(87,167,124,.35);
}

/* ============ LIGHT ============ */
[data-theme="light"] {
  --bg: #eceeee;
  --surface: #ffffff;
  --surface-2: #f2f4f4;
  --topbar: #1c2320;          /* keeps the dark-navbar character */
  --border: rgba(23,34,30,.12);
  --border-strong: rgba(23,34,30,.22);
  --divider: rgba(23,34,30,.07);

  --text: #1d2429;
  --text-2: #5a666d;
  --text-3: #86929a;

  --accent: #2e7d54;
  --accent-hover: #266a47;
  --on-accent: #eef7f1;
  --accent-fg: #256b48;
  --accent-soft: rgba(46,125,84,.10);
  --accent-border: rgba(46,125,84,.35);

  --warn: #a76b24;
  --danger: #b3423d;
  --danger-soft: rgba(179,66,61,.10);
  --shadow-card: 0 1px 3px rgba(23,34,30,.10);
  --shadow-raised: 0 6px 18px rgba(23,34,30,.20);
  --focus-ring: 0 0 0 3px rgba(46,125,84,.25);
}