/* ============================================================
   drik.ai — Core Tokens
   Light-mode operator console. Gov-portal meets modern console.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Surfaces ---------- */
  --canvas:        #FAFAFA;  /* app background — never pure white */
  --surface:       #FFFFFF;  /* cards, panels */
  --surface-raised:#FFFFFF;  /* modals, popovers (pair with shadow) */
  --surface-sunken:#F3F4F6;  /* inset wells, code blocks, table stripes */

  /* ---------- Borders ---------- */
  --border:        #E5E7EB;  /* default separation */
  --border-strong: #D1D5DB;  /* table headers, section dividers */
  --border-heavy:  #9CA3AF;  /* focus, keyboard rings */

  /* ---------- Text ---------- */
  --fg1: #0F1419;  /* primary — near-black */
  --fg2: #4B5563;  /* secondary — body copy w/ hierarchy */
  --fg3: #6B7280;  /* tertiary — meta, captions */
  --fg4: #9CA3AF;  /* disabled, placeholder */

  /* ---------- Brand (gold) ---------- */
  --gold:         #D4A843;  /* brand gold — filled buttons, selected bg */
  --gold-deep:    #B8902F;  /* text/icons on light — deeper contrast */
  --gold-darker:  #8F6E1F;  /* text on gold tint backgrounds */
  --gold-tint:    #FBF5E6;  /* selected-row, gold-highlighted cells */
  --gold-tint-2:  #F7EACF;  /* pressed / darker selected state */

  /* ---------- Primary action ---------- */
  --primary:       #111827;  /* graphite — "Approve & Issue" CTA */
  --primary-hover: #0F1419;
  --primary-press: #000000;
  --navy:          #1E3A8A;  /* alt primary — deep navy */
  --navy-hover:    #1E40AF;

  /* ---------- Semantic (Tailwind-600 — institutional, not playful) ---------- */
  --danger:   #DC2626;  --danger-tint:   #FEE2E2;  --danger-border:   #FCA5A5;
  --warning:  #D97706;  --warning-tint:  #FEF3C7;  --warning-border:  #FCD34D;
  --success:  #059669;  --success-tint:  #D1FAE5;  --success-border:  #6EE7B7;
  --info:     #2563EB;  --info-tint:     #DBEAFE;  --info-border:     #93C5FD;

  /* ---------- Data viz (map overlays) ---------- */
  --viz-cold:   #1E3A8A;  /* probability-cone low */
  --viz-warm:   #DC2626;  /* probability-cone high */
  --heat-1:     #FEF3C7;
  --heat-2:     #FCD34D;
  --heat-3:     #F97316;
  --heat-4:     #DC2626;

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

  /* ---------- Type scale (8pt grid) ---------- */
  --fs-display: 44px;  --lh-display: 52px;  --ls-display: -0.02em;
  --fs-h1:      32px;  --lh-h1:      40px;  --ls-h1:      -0.015em;
  --fs-h2:      24px;  --lh-h2:      32px;  --ls-h2:      -0.01em;
  --fs-h3:      18px;  --lh-h3:      28px;  --ls-h3:      -0.005em;
  --fs-body:    14px;  --lh-body:    20px;  --ls-body:    0;
  --fs-body-lg: 16px;  --lh-body-lg: 24px;
  --fs-small:   13px;  --lh-small:   18px;
  --fs-meta:    12px;  --lh-meta:    16px;  --ls-meta:    0.02em;
  --fs-mono:    13px;  --lh-mono:    18px;

  /* ---------- Weights (light-mode — NOT shouty) ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;  /* headings land here, not 700 */
  --fw-bold:    700;  /* rare, for display-numerics only */

  /* ---------- Spacing (8pt grid) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- Density (rows, controls) ---------- */
  --row-h:       36px;  /* table rows, list items */
  --row-h-dense: 32px;
  --control-h:   36px;  /* buttons, inputs */
  --control-h-sm:28px;

  /* ---------- Radii — restrained. Gov-portal adjacent. ---------- */
  --radius-sm: 3px;   /* chips, tags */
  --radius:    6px;   /* buttons, inputs, small cards */
  --radius-md: 8px;   /* panels, cards */
  --radius-lg: 12px;  /* modals, elevated surfaces */

  /* ---------- Shadows — subtle. Prefer borders. ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow:    0 1px 3px rgba(15, 20, 25, 0.06), 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 4px 8px rgba(15, 20, 25, 0.06), 0 2px 4px rgba(15, 20, 25, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 20, 25, 0.08), 0 4px 8px rgba(15, 20, 25, 0.04);
  --ring-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);    /* info-blue focus ring */
  --ring-gold:  0 0 0 3px rgba(212, 168, 67, 0.28);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:    120ms;
  --dur:         180ms;
  --dur-slow:    260ms;
}

/* ============================================================
   Base
   ============================================================ */

html, body {
  background: var(--canvas);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

.display, h1.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg2);
}

.small    { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg3); }
.meta     { font-size: var(--fs-meta);  line-height: var(--lh-meta);
            letter-spacing: var(--ls-meta); text-transform: uppercase;
            font-weight: var(--fw-medium); color: var(--fg3); }

code, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-weight: var(--fw-medium);  /* plates/timestamps carry weight */
  color: var(--fg1);
}

/* Plate — license-plate style, common in enforcement UIs */
.plate {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--fg1);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  display: inline-block;
}

/* Links */
a {
  color: var(--info);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

/* Utility — use sparingly */
.fg1 { color: var(--fg1); }  .fg2 { color: var(--fg2); }
.fg3 { color: var(--fg3); }  .fg4 { color: var(--fg4); }
.gold { color: var(--gold-deep); }