/* ============================================================
   Ginny Design System — colors & type
   Birren industrial palette adapted for internal ops tooling.
   ============================================================ */

/* Fonts — Inter Tight for UI, JetBrains Mono for data.
   If removed, the system stacks fall back to system-ui / SF Mono. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Base surfaces (warm, per Birren — never pure white/grey) ── */
  --surface-bg: #f4f1e8; /* app background */
  --surface-panel: #ffffff; /* cards, nav, KPIs */
  --surface-sunken: #e8e4d8; /* selected rows, zebras, filter bars */
  --surface-overlay: rgba(44, 48, 40, 0.04); /* "today" row tint */

  /* ── Ink ── */
  --ink-strong: #2c3028; /* body, KPI values, headers */
  --ink-medium: #5a5e58; /* secondary labels, meta */
  --ink-subtle: #8c8c84; /* placeholders, sub-numbers, disabled */
  --ink-inverse: #f4f1e8; /* text on dark / saturated fills */

  /* ── Borders ── */
  --border: #d4c9a8; /* warm beige, default */
  --border-soft: #e8e4d8; /* between rows in tables */
  --border-strong: #5b8c6f; /* active tab, focused input, totals row */

  /* ── Birren signal palette ── */
  --birren-seafoam: #a8d5ba; /* fatigue-free highlight */
  --birren-green-med: #5b8c6f; /* primary — links, buttons, focus */
  --birren-green-dark: #3e5c4a; /* press / hover for primary */
  --birren-safety: #3d7a55; /* active status, success */
  --birren-blue: #4a7fb5; /* information — charts, chips */
  --birren-yellow: #e8b630; /* caution — warnings, literals */
  --birren-orange: #d97a2b; /* hazard — Amazon, supplier */
  --birren-red: #c4392f; /* error, destructive */
  --birren-gray: #8c8c84; /* structural — axes, dividers */
  --birren-beige: #d4c9a8; /* warm neutral */
  --birren-cologne: #6b8e6b; /* muted alt green */

  /* ── Semantic aliases ── */
  --color-primary: var(--birren-green-med);
  --color-primary-hover: var(--birren-green-dark);
  --color-link: var(--birren-green-med);
  --color-link-hover: var(--birren-green-dark);
  --color-success: var(--birren-safety);
  --color-info: var(--birren-blue);
  --color-warning: var(--birren-yellow);
  --color-danger: var(--birren-red);
  --color-accent-amz: var(--birren-orange);

  /* ── Chart series (in order) ── */
  --chart-1: var(--birren-green-med);
  --chart-2: var(--birren-blue);
  --chart-3: var(--birren-orange);
  --chart-4: var(--birren-yellow);
  --chart-5: var(--birren-cologne);
  --chart-6: var(--birren-red);
  --chart-7: var(--birren-gray);
  --chart-8: var(--birren-green-dark);

  /* ── Type ── */
  --font-sans:
    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-caption: 0.8rem; /* 12.8px */
  --text-micro: 0.75rem; /* 12px   — status badges */
  --text-micro-xs: 0.7rem; /* 11.2px — table headers */
  --text-sm: 0.875rem; /* 14px   — tables, forms */
  --text-base: 1rem; /* 16px   — body */
  --text-md: 1.1rem; /* 17.6px — h3 */
  --text-lg: 1.35rem; /* 21.6px — h2 */
  --text-xl: 1.75rem; /* 28px   — h1, KPI value */

  --leading-tight: 1.2;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.03em;

  /* ── Spacing (4/8 rhythm) ── */
  --space-0: 0;
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */

  /* ── Radii ── */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 10px;

  /* ── Shadows (warm, never pure black) ── */
  --shadow-sm: 0 1px 2px rgba(44, 48, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(44, 48, 40, 0.08);
  --shadow-lg: 0 2px 8px rgba(44, 48, 40, 0.2);

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 2px rgba(91, 140, 111, 0.18);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
}

/* ============================================================
   Dark theme — Birren night-shift palette.
   Activate by adding class="dark" to <html> or
   setting data-theme="dark" on any ancestor.
   Philosophy: never pure black; warm charcoal with a green bias,
   muted signals so hazard colours still read but don't vibrate
   against the dark ground.
   ============================================================ */
:root.dark,
[data-theme="dark"] {
  /* ── Surfaces (warm, greenish-charcoal — never #000) ── */
  --surface-bg:         #1E2220;
  --surface-panel:      #2A2E2B;
  --surface-sunken:     #34393A;
  --surface-overlay:    rgba(168, 213, 186, 0.06);

  /* ── Ink (warm, never pure #fff) ── */
  --ink-strong:         #E8E4D8;
  --ink-medium:         #A8A89E;
  --ink-subtle:         #6E7268;
  --ink-inverse:        #1E2220;

  /* ── Borders (warm charcoal, readable without glow) ── */
  --border:             #3E4340;
  --border-soft:        #34393A;
  --border-strong:      #7FB590;

  /* ── Birren signals — shifted for dark ground ── */
  --birren-seafoam:     #B8E0C6;
  --birren-green-med:   #7FB590;
  --birren-green-dark:  #5B8C6F;
  --birren-safety:      #6BA87E;
  --birren-blue:        #6FA3D1;
  --birren-yellow:      #E8C45A;
  --birren-orange:      #E89456;
  --birren-red:         #D55A50;
  --birren-gray:        #8A8E84;
  --birren-beige:       #6E7268;
  --birren-cologne:     #8FAE90;

  /* ── Chart series (re-balanced for dark canvas) ── */
  --chart-1: var(--birren-green-med);
  --chart-2: var(--birren-blue);
  --chart-3: var(--birren-orange);
  --chart-4: var(--birren-yellow);
  --chart-5: var(--birren-cologne);
  --chart-6: var(--birren-red);
  --chart-7: #A8A89E;
  --chart-8: var(--birren-seafoam);

  /* ── Shadows (deeper for dark) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.50);

  /* ── Focus ring — seafoam alpha, more visible ── */
  --focus-ring: 0 0 0 2px rgba(127, 181, 144, 0.35);
}

/* ============================================================
   Semantic element styles.
   Drop colors_and_type.css after a reset and elements inherit.
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--ink-strong);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  color: var(--ink-strong);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

h1 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
}
h2 {
  font-size: var(--text-lg);
  letter-spacing: -0.005em;
}
h3 {
  font-size: var(--text-md);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--ink-strong);
}

small,
.caption {
  font-size: var(--text-caption);
  color: var(--ink-medium);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

code,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ── Micro-labels (the signature type pattern) ── */
.micro-label {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
}

.table-label {
  font-size: var(--text-micro-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
}

/* KPI value */
.kpi-value-text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
}