/* =============================================================
   Design Tokens — single source of truth for all visual values.
   Override Bootstrap 5 custom properties from here.
   NEVER hardcode colours, fonts, or spacing outside this file.
   ============================================================= */
:root {
  /* ── Brand palette ───────────────────────────────────────── */
  --token-color-navy:           #1c3a3d;
  --token-color-navy-mid:       #1e4449;
  --token-color-navy-light:     #2d5e65;
  --token-color-primary:        #037f8d;
  --token-color-primary-dark:   #025f6a;
  --token-color-primary-light:  #e1f4f5;
  --token-color-surface:        #ffffff;
  --token-color-surface-muted:  #f7f7f7;
  --token-color-border:         #e0e0e0;
  --token-color-text:           #333333;
  --token-color-text-muted:     #626262;
  --token-color-danger:         #ef4444;
  --token-color-success:        #6a951f;
  --token-color-warning:        #f39200;
  --token-color-info:           #037f8d;

  /* ── Bootstrap 5 overrides ───────────────────────────────── */
  --bs-primary:                 var(--token-color-primary);
  --bs-primary-rgb:             3, 127, 141;
  --bs-body-color:              var(--token-color-text);
  --bs-body-bg:                 var(--token-color-surface-muted);
  --bs-secondary-bg:            var(--token-color-surface-muted);
  --bs-border-color:            var(--token-color-border);
  --bs-body-font-family:        var(--token-font-family-base);
  --bs-heading-color:           var(--token-color-navy);
  --bs-link-color:              var(--token-color-primary);
  --bs-link-hover-color:        var(--token-color-primary-dark);

  /* ── Typography ──────────────────────────────────────────── */
  --token-font-family-base:     'Noto Sans', system-ui, -apple-system, sans-serif;
  --token-font-family-serif:    'PT Serif', Georgia, serif;
  --token-font-family-ui:       'Rubik', system-ui, sans-serif;
  --token-font-family-mono:     'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --token-font-size-base:       1rem;
  --token-font-size-sm:         0.875rem;
  --token-font-size-lg:         1.125rem;
  --token-line-height-base:     1.5;
  --token-font-weight-normal:   400;
  --token-font-weight-medium:   500;
  --token-font-weight-bold:     700;

  /* ── Spacing (4 px base grid) ────────────────────────────── */
  --token-space-1:   0.25rem;   /*  4px */
  --token-space-2:   0.5rem;    /*  8px */
  --token-space-3:   0.75rem;   /* 12px */
  --token-space-4:   1rem;      /* 16px */
  --token-space-5:   1.25rem;   /* 20px */
  --token-space-6:   1.5rem;    /* 24px */
  --token-space-8:   2rem;      /* 32px */
  --token-space-10:  2.5rem;    /* 40px */
  --token-space-12:  3rem;      /* 48px */

  /* ── Border radius ───────────────────────────────────────── */
  --token-radius-sm:   0.25rem;
  --token-radius-md:   0.5rem;
  --token-radius-lg:   1rem;
  --token-radius-xl:   1.25rem;
  --token-radius-pill: 50rem;

  /* ── Shadows ─────────────────────────────────────────────── */
  --token-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --token-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --token-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08);
  --token-shadow-auth: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.14);

  /* ── Z-index scale ───────────────────────────────────────── */
  --token-z-dropdown:  1000;
  --token-z-modal:     1050;
  --token-z-toast:     1090;

  /* ── Transitions ─────────────────────────────────────────── */
  --token-transition-fast:   160ms cubic-bezier(.4, 0, .2, 1);
  --token-transition-base:   250ms cubic-bezier(.4, 0, .2, 1);
  --token-transition-slow:   400ms cubic-bezier(.4, 0, .2, 1);
}