/* ================================================================
   plaingraph design tokens
   Calm, technical, high-credibility. Cool neutrals, one accent,
   three-band semantic colors mapping directly to the screening
   decision (match / review / no-match).
   ================================================================ */

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

:root {
  /* ---------- TYPE STACKS ----------
     Geist + Geist Mono are the system pairing. Geist is a precise,
     restrained grotesque suited to dense UI; Geist Mono carries every
     identifier, score, timestamp, hash, and code snippet.
     If unavailable, fall back to platform UI sans / monospace.        */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Modest 1.125 scale. Display is reserved for marketing surfaces;
     UI rarely goes above 20px.                                        */
  --text-xs:   11px;   /* metadata, labels */
  --text-sm:   12px;   /* table cells, secondary UI */
  --text-base: 14px;   /* default UI body */
  --text-md:   15px;   /* reading body on marketing/docs */
  --text-lg:   17px;
  --text-xl:   20px;   /* section headers in UI */
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;   /* marketing display only */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight: -0.02em;  /* display */
  --tracking-snug:  -0.01em;  /* large UI */
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* eyebrows / all-caps labels */
  --tracking-mono:  -0.005em; /* mono looks tighter than expected */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- NEUTRAL INK (cool grey scale) ----------
     The workhorse. Slight blue undertone (hue ~225) so it sits
     cleanly next to the accent without going warm/sepia.              */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFC;  /* page background */
  --ink-50:  #F4F6F8;  /* surface raised */
  --ink-100: #ECEFF3;  /* hairline fills, hover */
  --ink-150: #DFE3E9;  /* borders */
  --ink-200: #CBD2DB;
  --ink-300: #A8B1BD;
  --ink-400: #7A8493;  /* tertiary text */
  --ink-500: #5A6473;  /* secondary text */
  --ink-600: #3F4854;  /* body */
  --ink-700: #2A323D;
  --ink-800: #1A2029;  /* primary text */
  --ink-900: #0F141B;  /* near-black, headings */
  --ink-950: #070A0E;

  /* ---------- ACCENT (Ink Blue) ----------
     One color, used sparingly: primary actions, focused links,
     selected rows, the active node in a graph. Never decorative.      */
  --accent-50:  #EEF2FF;
  --accent-100: #DCE3FE;
  --accent-200: #BBC8FD;
  --accent-300: #93A6FA;
  --accent-400: #6B83F5;
  --accent-500: #3D5AF1;  /* on-brand */
  --accent-600: #2F47DA;  /* primary button */
  --accent-700: #2638B0;
  --accent-800: #1F2D88;
  --accent-900: #182366;

  /* ---------- SEMANTIC: DECISION BANDS ----------
     These map 1:1 to the product's three screening outcomes.
     Use ONLY for the decision they name.                              */

  /* MATCH / auto-clear — confident green. Deep, never lime. */
  --match-50:  #ECFDF3;
  --match-100: #D2F4DD;
  --match-200: #A6E7BC;
  --match-300: #6BD493;
  --match-500: #1FA45B;
  --match-600: #128046;
  --match-700: #0C6638;
  --match-800: #094E2B;

  /* REVIEW / needs-review — restrained amber, not yellow. */
  --review-50:  #FEF6EC;
  --review-100: #FBE7C6;
  --review-200: #F6D08A;
  --review-300: #EFB14C;
  --review-500: #C97A0C;
  --review-600: #A86108;
  --review-700: #864D08;
  --review-800: #663B08;

  /* RISK / no-match / blocked — deep red. */
  --risk-50:  #FDECEC;
  --risk-100: #FACECE;
  --risk-200: #F39E9E;
  --risk-300: #E96B6B;
  --risk-500: #C8252B;
  --risk-600: #A41A20;
  --risk-700: #82161B;
  --risk-800: #631317;

  /* INFO — used for neutral system notices, never for decisions. */
  --info-50:  #EFF6FF;
  --info-500: #2563EB;
  --info-700: #1D4ED8;

  /* ---------- SURFACE / TEXT TOKENS (LIGHT) ---------- */
  --bg-canvas:    var(--ink-25);
  --bg-surface:   var(--ink-0);
  --bg-raised:    var(--ink-0);
  --bg-sunken:    var(--ink-50);
  --bg-hover:     var(--ink-100);
  --bg-active:    var(--ink-150);
  --bg-selected:  var(--accent-50);
  --bg-overlay:   rgba(15, 20, 27, 0.45);

  --fg-default:    var(--ink-800);
  --fg-strong:     var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --fg-disabled:   var(--ink-300);
  --fg-on-accent:  var(--ink-0);
  --fg-link:       var(--accent-600);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong:  var(--ink-200);
  --border-focus:   var(--accent-500);

  /* ---------- SPACING ---------- */
  --space-0:   0px;
  --space-px:  1px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- RADIUS ----------
     Tight. Pillowy roundings feel consumer; we are tools.             */
  --radius-none: 0px;
  --radius-xs:   2px;   /* badges, tags */
  --radius-sm:   4px;   /* inputs, buttons */
  --radius-md:   6px;   /* cards */
  --radius-lg:   8px;   /* panels */
  --radius-xl:   12px;  /* modals (rare) */
  --radius-full: 9999px;

  /* ---------- ELEVATION ----------
     Mostly we use borders, not shadows. Shadows are reserved for
     popovers and the rare modal. Never decorative.                    */
  --elev-0: none;
  --elev-1: 0 1px 0 0 rgba(15, 20, 27, 0.04), 0 1px 2px 0 rgba(15, 20, 27, 0.05);
  --elev-2: 0 2px 4px -2px rgba(15, 20, 27, 0.06), 0 4px 8px -2px rgba(15, 20, 27, 0.08);
  --elev-3: 0 8px 16px -4px rgba(15, 20, 27, 0.10), 0 4px 8px -2px rgba(15, 20, 27, 0.06);
  --elev-focus: 0 0 0 3px rgba(61, 90, 241, 0.25);

  /* ---------- MOTION ----------
     Very little movement. Short fades for state changes only.         */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  180ms; /* @kind other */
  --dur-slow:  280ms; /* @kind other */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container-base:   1040px;
  --container-wide:   1280px;
  --container-max:    1440px;
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-theme="dark"] {
  --bg-canvas:    #0A0E14;
  --bg-surface:   #11161E;
  --bg-raised:    #161C26;
  --bg-sunken:    #0A0E14;
  --bg-hover:     #1B2230;
  --bg-active:    #232B3B;
  --bg-selected:  rgba(61, 90, 241, 0.15);
  --bg-overlay:   rgba(0, 0, 0, 0.65);

  --fg-default:    #E2E6EC;
  --fg-strong:     #F5F7FA;
  --fg-muted:      #93A0B0;
  --fg-subtle:     #6E7B8C;
  --fg-disabled:   #46505E;
  --fg-on-accent:  #FFFFFF;
  --fg-link:       #93A6FA;

  --border-subtle:  #1B2230;
  --border-default: #232B3B;
  --border-strong:  #2F3A4D;
  --border-focus:   var(--accent-400);

  /* semantic shifts lighter for legibility on dark */
  --match-500:  #34C77A;
  --match-600:  #1FA45B;
  --review-500: #E7A53A;
  --review-600: #C97A0C;
  --risk-500:   #E36B70;
  --risk-600:   #C8252B;

  --elev-1: 0 1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --elev-2: 0 2px 4px -2px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.5);
  --elev-3: 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --elev-focus: 0 0 0 3px rgba(107, 131, 245, 0.35);
}

/* ================================================================
   SEMANTIC ELEMENT STYLES
   Reusable utility-flavored classes. Apply directly or @apply in
   your own components.
   ================================================================ */

.pg-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

.pg-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-strong);
}

.pg-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-strong);
}

.pg-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.pg-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.pg-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-default);
}

.pg-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-default);
}

.pg-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.pg-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.pg-mono,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--tracking-mono);
  font-variant-ligatures: none;
  font-feature-settings: "zero" 1, "ss01" 1;
}

.pg-id {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-default);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.pg-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a.pg-link, .pg-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg-link) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

a.pg-link:hover, .pg-link:hover {
  text-decoration-color: var(--fg-link);
}

/* Focus ring (apply to interactive elements) */
.pg-focusable:focus-visible {
  outline: none;
  box-shadow: var(--elev-focus);
  border-color: var(--border-focus);
}

/* Base reset that designs can opt into */
.pg-reset, .pg-reset * {
  box-sizing: border-box;
}
.pg-reset {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}