/* ============================================================
   Governance Intelligence — design tokens
   Ported verbatim from the Claude Design handoff
   (Governance Intelligence Design System, Teal Edition).
   Values are the numeric source of truth — do not eyeball-adjust.
   ============================================================ */

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

:root {
  /* ---------- Brand colour ---------- */
  --brand-teal:      #1FA79A;
  --brand-teal-700:  #178277;
  --brand-teal-500:  #1FA79A;
  --brand-teal-300:  #6CC8BE;
  --brand-teal-100:  #C9EBE6;
  --brand-teal-50:   #EAF6F4;
  --brand-teal-tint: #F4FAF9;

  --brand-slate:     #47535B;
  --brand-slate-900: #2A3239;
  --brand-slate-700: #47535B;
  --brand-slate-500: #6E7A82;
  --brand-slate-300: #A8B1B7;
  --brand-slate-100: #D7DCDF;
  --brand-slate-50:  #ECEFF1;
  --brand-slate-25:  #F5F7F8;

  --paper: #F8F9FA;
  --white: #FFFFFF;
  --black: #14191D;

  /* ---------- Semantic colour ---------- */
  --bg:         var(--paper);
  --bg-raised:  var(--white);
  --bg-sunken:  var(--brand-slate-25);
  --bg-tint:    var(--brand-teal-tint);
  --bg-inverse: var(--brand-slate-900);

  --fg-1: var(--brand-slate-900);
  --fg-2: var(--brand-slate-700);
  --fg-3: var(--brand-slate-500);
  --fg-4: var(--brand-slate-300);
  --fg-on-dark: var(--white);
  --fg-on-teal: var(--white);

  --line-1: var(--brand-slate-100);
  --line-2: var(--brand-slate-100);
  --line-subtle: var(--brand-slate-50);
  --line-strong: var(--brand-slate-300);

  --accent: var(--brand-teal);
  --accent-hover: var(--brand-teal-700);
  --accent-tint: var(--brand-teal-50);

  /* ---------- Status ---------- */
  --status-success:      #2E8C6A;
  --status-success-tint: #E5F2EC;
  --status-warning:      #C77D2E;
  --status-warning-tint: #FBEFDC;
  --status-danger:       #C0463F;
  --status-danger-tint:  #F8E4E2;
  --status-info:         #3F7AA8;
  --status-info-tint:    #E4EEF6;

  /* ---------- Type ---------- */
  --font-sans: "Inter Tight", "Neue Haas Grotesk Display Pro",
               "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial,
               system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;

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

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

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-display: 0.18em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- Radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container:       1200px;
  --container-wide:  1360px;
  --container-tight: 880px;
  --gutter:          var(--space-6);

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(42, 50, 57, 0.06);
  --shadow-sm: 0 2px 4px rgba(42, 50, 57, 0.06), 0 1px 2px rgba(42, 50, 57, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(42, 50, 57, 0.10), 0 2px 4px rgba(42, 50, 57, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(42, 50, 57, 0.18), 0 4px 8px rgba(42, 50, 57, 0.06);
  --shadow-xl: 0 32px 64px -20px rgba(42, 50, 57, 0.24);
  --shadow-focus: 0 0 0 3px rgba(31, 167, 154, 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
  --duration-4: 520ms;
}