/* Design tokens — dark product theme
   Palette: black, charcoal, grey, beige, white + green family */

:root {
  /* Spatial grid (8px base) */
  --grid-unit: 8px;

  /* Neutrals — black / charcoal / grey */
  --color-base: #0a0a0a;
  --color-surface: #161616;
  --color-surface-raised: #1f1f1f;
  --color-surface-hover: #2a2a2a;
  --color-border: #3a3a3a;
  --color-border-subtle: #2a2a2a;

  /* Text — warm white / grey / beige */
  --color-text-primary: #f4efe6;
  --color-text-secondary: #b4aea3;
  --color-text-muted: #7a756c;
  --color-text-on-accent: #f4efe6;

  /* Beige */
  --color-beige: #c9bba6;
  --color-beige-muted: rgba(201, 187, 166, 0.14);

  /* Green family */
  --color-green-dark: #2d5a38;
  --color-green: #3f7a4c;
  --color-green-light: #6fa87a;

  /* Brand — forest green (actions, links, primary series) */
  --color-accent: #3f7a4c;
  --color-accent-hover: #4e935c;
  --color-accent-muted: rgba(63, 122, 76, 0.16);
  --color-accent-border: rgba(63, 122, 76, 0.35);
  --color-link: #6fa87a;

  /* Functional — muted for dark backgrounds */
  --color-critical: #b45a48;
  --color-critical-bg: rgba(180, 90, 72, 0.12);
  --color-critical-border: rgba(180, 90, 72, 0.38);

  --color-high: #c4a06a;
  --color-high-bg: rgba(196, 160, 106, 0.12);
  --color-high-border: rgba(196, 160, 106, 0.35);

  --color-medium: #8a8580;
  --color-medium-bg: rgba(138, 133, 128, 0.1);

  --color-low: #5c5854;
  --color-low-bg: rgba(92, 88, 84, 0.1);

  --color-success: #6fa87a;
  --color-success-bg: rgba(111, 168, 122, 0.12);
  --color-success-border: rgba(111, 168, 122, 0.35);

  /* Data / heatmap — blue (cold/low xOPS) → red (hot/high xOPS) */
  --color-heatmap-low:  rgba(59, 130, 246, 0.70);   /* blue-500  */
  --color-heatmap-mid:  rgba(250, 204, 21, 0.60);   /* yellow-400 */
  --color-heatmap-high: rgba(239, 68, 68, 0.80);    /* red-500   */

  /* Typography — Ant 14px base scale */
  --font-prose: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-data: "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px — body base */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5rem;    /* 24px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-xs: 1.6667;  /* 20/12 */
  --leading-sm: 1.5714;  /* 22/14 — Ant base */
  --leading-normal: 1.5714; /* alias for --leading-sm */
  --leading-base: 1.5;   /* 24/16 */
  --leading-lg: 1.4;     /* 28/20 */
  --leading-xl: 1.3333;  /* 32/24 */
  --leading-relaxed: 1.65; /* prose blocks */

  /* Spacing — 8px grid (4px half-steps allowed) */
  --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-8: 3rem;     /* 48px */
  --space-10: 3.5rem;  /* 56px */
  --space-12: 4rem;    /* 64px */

  /* Layout */
  --nav-height: 3.5rem; /* 56px */
  --tab-bar-height: 3.5rem;
  --feed-column-width: 390px;
  --feed-media-ratio: 4 / 5;
  --content-max-width: 56rem;
  --page-padding-x: 2rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Motion — functional only (Ant-aligned timing) */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}