/* ============================================================================
   GIP Bank — "Federal Standard" design tokens.
   The single source of brand truth. Nothing outside this file declares a raw
   color, font stack, spacing step, radius, or shadow.
   ========================================================================== */

/* ── Self-hosted fonts (no runtime CDN) ─────────────────────────────────── */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Primary: deep green ──────────────────────────────────────────────── */
  --green-25:  #F6FAF8;
  --green-50:  #EDF5F0;
  --green-100: #D7EAE0;
  --green-200: #B3D7C4;
  --green-300: #89C0A6;
  --green-400: #5CA784;
  --green-500: #398D68;
  --green-600: #1F7A54;
  --green-700: #146245;   /* links, primary buttons (7.3:1 on white) */
  --green-800: #0D4E37;   /* flagship brand green */
  --green-900: #093D2B;
  --green-950: #062A1E;

  /* ── Accent: old gold (line, icon, seal — never large fills) ──────────── */
  --gold-50:  #FBF6E9;
  --gold-100: #F5EACB;
  --gold-200: #EAD79E;
  --gold-300: #DDC06A;
  --gold-400: #CFA83D;   /* the signature hairline */
  --gold-500: #BC8F1F;   /* seals, eyebrows on dark */
  --gold-600: #A17714;
  --gold-700: #83600F;   /* gold text on light (5.8:1) */
  --gold-800: #674B0C;
  --gold-900: #4E390A;

  /* ── Neutrals: warm stone ─────────────────────────────────────────────── */
  --white:     #FFFFFF;
  --stone-25:  #FCFCFA;   /* app page background */
  --stone-50:  #F7F6F3;
  --stone-100: #EFEEE9;
  --stone-200: #E3E1DA;   /* hairlines */
  --stone-300: #CFCCC2;   /* input borders */
  --stone-400: #A7A399;
  --stone-500: #8A867C;   /* muted text */
  --stone-600: #6E6A61;   /* secondary text */
  --stone-700: #55524B;   /* body text */
  --stone-800: #3D3B36;
  --stone-900: #26251F;   /* headings when not green */
  --stone-950: #171613;

  /* ── Semantic (chrome: alerts, pills, validation) ─────────────────────── */
  --ok-700: #1E7B34;  --ok-300: #A9D6B4;  --ok-50: #EAF5EC;
  --warn-700: #9A6700; --warn-300: #E4C989; --warn-50: #FBF3DF;
  --err-700: #B3261E; --err-300: #EFB0AB; --err-50: #FBEDEB;
  --info-700: #1B5FA8; --info-300: #A8C6E8; --info-50: #EAF1F9;

  /* ── Status-pill families (workflow states) ───────────────────────────── */
  --pill-blue-fg: #1B5FA8;   --pill-blue-bg: #EAF1F9;
  --pill-indigo-fg: #4C51A8; --pill-indigo-bg: #EDEEFA;
  --pill-teal-fg: #0E7490;   --pill-teal-bg: #E6F5F8;
  --pill-violet-fg: #7A3EA8; --pill-violet-bg: #F4EDFA;
  --pill-gold-fg: #83600F;   --pill-gold-bg: #FBF6E9;
  --pill-green-fg: #1E7B34;  --pill-green-bg: #EAF5EC;
  --pill-orange-fg: #B45309; --pill-orange-bg: #FDF1E3;
  --pill-red-fg: #B3261E;    --pill-red-bg: #FBEDEB;
  --pill-neutral-fg: #55524B;--pill-neutral-bg: #EFEEE9;

  /* ── Chart palette (validated order — never cycled/reordered) ─────────── */
  --chart-single: #008300;
  --chart-1: #2A78D6;
  --chart-2: #EB6834;
  --chart-3: #1BAF7A;
  --chart-4: #EDA100;
  --chart-5: #E87BA4;
  --chart-6: #008300;
  --chart-7: #4A3AA7;
  --chart-8: #E34948;
  --chart-grid: #E3E1DA;
  --chart-axis: #CFCCC2;
  --chart-label: #8A867C;
  --chart-status-good: #0CA30C;
  --chart-status-warn: #FAB219;
  --chart-status-serious: #EC835A;
  --chart-status-critical: #D03B3B;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-ui: 'Public Sans', -apple-system, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --text-caption: 0.75rem;   /* 12 */
  --text-small: 0.8125rem;   /* 13 */
  --text-base: 0.875rem;     /* 14 — portal body */
  --text-lead: 1rem;         /* 16 — public body */
  --text-h5: 1.125rem;       /* 18 */
  --text-h4: 1.3125rem;      /* 21 */
  --text-h3: 1.5rem;         /* 24 */
  --text-h2: 1.75rem;        /* 28 */
  --text-h1: 2.125rem;       /* 34 */
  --text-display: 2.625rem;  /* 42 */
  --text-hero: 3.25rem;      /* 52 */

  /* ── Spacing (4px base) ───────────────────────────────────────────────── */
  --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px;
  --sp-10: 48px; --sp-11: 64px; --sp-12: 80px; --sp-13: 96px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ── Elevation (neutral, soft) ────────────────────────────────────────── */
  --e-0: 0 0 0 1px var(--stone-200);
  --e-1: 0 1px 2px rgba(23, 24, 22, 0.06);
  --e-2: 0 4px 12px rgba(23, 24, 22, 0.10);
  --e-3: 0 12px 32px rgba(23, 24, 22, 0.16);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 150ms;
  --t-med: 200ms;

  /* ── Semantic aliases ─────────────────────────────────────────────────── */
  --page-bg: var(--stone-25);
  --surface: var(--white);
  --ink: var(--stone-900);
  --body: var(--stone-700);
  --muted: var(--stone-600); /* WCAG-AA on white (≈5.3:1); was stone-500 */
  --hairline: var(--stone-200);
  --link: var(--green-700);
  --brand: var(--green-800);
  --focus-ring: var(--green-700);
  --focus-ring-on-dark: var(--gold-300);

  /* ── Dark chrome surfaces (graphite) — the neutral-forward rebalance ─────
     Green is no longer a surface: sidebars, heroes, footers and other dark
     chrome resolve through these graphite tokens; green survives only as a
     purposeful accent (--accent) on buttons, links, active states and seals. */
  --graphite-950: #0F1214;
  --graphite-900: #16191B;
  --graphite-800: #1F2327;
  --graphite-700: #2B3034;
  --surface-dark: var(--graphite-900);
  --surface-dark-2: var(--graphite-800);
  --surface-dark-fg: #E8EBE9;      /* near-white text on graphite */
  --surface-dark-muted: #9DA3A1;   /* muted text/icons on graphite */
  --surface-dark-line: rgba(255, 255, 255, 0.08);
  --gradient-ceremonial: linear-gradient(155deg, var(--graphite-950), var(--graphite-900) 52%, var(--graphite-800));
  --accent: var(--green-700);       /* the demoted, purposeful green */
  --accent-strong: var(--green-800);
  --chip-bg: var(--stone-100);      /* neutral default icon-chip fill */
  --chip-fg: var(--stone-600);
  --hover-tint: var(--stone-50);    /* neutral row/menu hover */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1200px;
  --form-max: 720px;
}