/*
  Design tokens for the Government Portal design system.
  One place to change the visual identity — components below never hardcode a color/space/radius,
  they reference these custom properties instead.
*/
:root {
  /* ---- Color: brand ---- */
  --gp-navy-900: #0a2540;
  --gp-navy-800: #0f3357;
  --gp-navy-700: #15406b;
  --gp-navy-600: #1c4f82;
  --gp-navy-500: #235e9b;
  --gp-navy-100: #e7eef6;
  --gp-navy-50:  #f3f7fb;

  --gp-gold-600: #a3812f;
  --gp-gold-500: #b6923f;
  --gp-gold-100: #f6ecd6;

  /* ---- Color: neutrals (very slight cool bias, matches navy) ---- */
  --gp-ink-900: #10151c;
  --gp-ink-700: #38414d;
  --gp-ink-500: #5c6773;
  --gp-ink-300: #98a2ad;
  --gp-ink-200: #c7ced6;
  --gp-ink-100: #e4e8ec;
  --gp-ink-50:  #f4f6f8;
  --gp-white:   #ffffff;

  /* ---- Semantic ---- */
  --gp-success-600: #1a7f4a;
  --gp-success-100: #e4f5ec;
  --gp-warning-700: #8a5a00;
  --gp-warning-100: #fdf1de;
  --gp-danger-600:  #b3261e;
  --gp-danger-100:  #fbe9e7;
  --gp-info-600:    var(--gp-navy-600);
  --gp-info-100:    var(--gp-navy-100);

  /* ---- Surfaces ---- */
  --gp-bg: var(--gp-ink-50);
  --gp-surface: var(--gp-white);
  --gp-surface-raised: var(--gp-white);
  --gp-border: var(--gp-ink-200);
  --gp-border-strong: var(--gp-ink-300);

  /* ---- Text ---- */
  --gp-text: var(--gp-ink-900);
  --gp-text-muted: var(--gp-ink-500);
  --gp-text-on-brand: var(--gp-white);
  --gp-link: var(--gp-navy-600);

  /* ---- Type ---- */
  --gp-font-body: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --gp-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --gp-fs-xs: 0.75rem;
  --gp-fs-sm: 0.8125rem;
  --gp-fs-base: 0.9375rem;
  --gp-fs-md: 1.0625rem;
  --gp-fs-lg: 1.25rem;
  --gp-fs-xl: 1.625rem;
  --gp-fs-2xl: 2.125rem;
  --gp-lh-tight: 1.25;
  --gp-lh-base: 1.6;

  /* ---- Space scale (4px base) ---- */
  --gp-space-1: 0.25rem;
  --gp-space-2: 0.5rem;
  --gp-space-3: 0.75rem;
  --gp-space-4: 1rem;
  --gp-space-5: 1.5rem;
  --gp-space-6: 2rem;
  --gp-space-7: 2.5rem;
  --gp-space-8: 3.5rem;

  /* ---- Radius / shadow ---- */
  --gp-radius-sm: 6px;
  --gp-radius-md: 10px;
  --gp-radius-lg: 16px;
  --gp-radius-pill: 999px;
  --gp-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --gp-shadow-md: 0 4px 16px rgba(10, 37, 64, 0.08);
  --gp-shadow-focus: 0 0 0 3px rgba(35, 94, 155, 0.35);

  /* ---- Layout ---- */
  --gp-header-h: 68px;
  --gp-content-max: 1160px;
  --gp-transition: 150ms ease;
}