/* =========================================================================
   AssocBridge design system — tokens.css
   Every design decision lives here as a CSS custom property. Re-theme by
   changing the brand tokens (navy / gold scales) and the semantic pairs.
   Load order (all shells): fonts.css, bootstrap.min.css, bootstrap-icons.min.css,
   tokens.css, base.css, components.css, then ONE shell file.
   ========================================================================= */

:root {
  /* ---------- Brand: navy scale (primary) ---------- */
  --navy-950: #08172f;   /* footer, utility strip, text on gold */
  --navy-900: #0b1f3f;   /* banner, hero, rail, headings */
  --navy-800: #102a52;   /* primary hover */
  --navy-700: #14305c;   /* primary action, chips, links */
  --navy-600: #234b85;   /* link hover */
  --navy-500: #3a67a8;   /* icons, hovered borders */
  --navy-300: #9fb0ce;   /* secondary text on dark */
  --navy-200: #c9d3e4;   /* borders, body text on dark */
  --navy-100: #e6ecf5;   /* tints */
  --navy-50:  #f1f4f9;   /* table heads, panel feet */

  /* ---------- Brand: brass / gold scale (accent) ---------- */
  --gold-300: #e6cc8a;   /* hover, on-navy text */
  --gold-400: #d8b45a;   /* rules, gold button, on-navy accent, focus on dark */
  --gold-500: #c39b3a;   /* decorative only, never text */
  --gold-700: #7a5a12;   /* brass TEXT on light */
  --gold-100: #f3e6bd;   /* tint */
  --gold-50:  #fbf6e6;   /* tint */

  /* ---------- Neutrals ---------- */
  --ink: #1d2433;        /* body */
  --ink-2: #3b4558;      /* secondary body */
  --muted: #5b667a;      /* meta, placeholders */
  --line: #dde2eb;       /* decorative borders */
  --line-strong: #c5ccd9;/* table head rule, decorative strong borders */
  --control-border: #7f8aa0; /* form control boundary: 3.5:1 on white (WCAG 1.4.11) */
  --surface: #f3f5f9;    /* admin canvas, auth main, tinted sections */
  --white: #ffffff;

  /* ---------- Semantic (text colour, tint background, tint border) ---------- */
  --success: #1b6b47;  --success-bg: #e3f2ea;  --success-line: #b7dcc6;  --success-strong: #155538;
  --warning: #8a5400;  --warning-bg: #fdf0d3;  --warning-line: #ebcb8b;  --warning-strong: #6e4300;  --warning-bar: #c98a1b;
  --danger:  #a42a2a;  --danger-bg:  #fbe7e7;  --danger-line:  #edb9b9;  --danger-strong:  #861f1f;
  --info:    #1d5e99;  --info-bg:    #e1edf8;  --info-line:    #b4d0ea;
  /* pressed / ink / wash shades that complete the semantic scales (no raw hex in component CSS) */
  --success-ink: #124d33;  --success-press: #10442c;  --success-hatch: #8cc4a8;
  --danger-ink:  #7d1f1f;  --danger-press:  #6d1818;
  --warning-wash: #fae3b0; --warning-wash-2: #f6d98f;  --warning-track: #f0d9a4;

  /* ---------- Focus ---------- */
  --focus: #2b66c4;                 /* 5.5:1 on white */
  --focus-on-dark: var(--gold-400); /* 8.3:1 on navy-900 */
  --focus-w: 3px;
  --focus-color: var(--focus);      /* swapped to gold inside dark surfaces (see base.css) */
  --ring: 0 0 0 3px rgba(43, 102, 196, .18);  /* DECORATIVE halo only; never the sole indicator */

  /* ---------- Typography ---------- */
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .8125rem;   /* 13 */
  --fs-base: .9375rem; /* 15 (public body; admin body is 14) */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: clamp(2rem, 1.4rem + 2.2vw, 3.125rem); /* display */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --measure: 42rem;        /* prose */
  --measure-wide: 46rem;   /* feed excerpts */

  /* ---------- Spacing (4 / 8 pt) ---------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --section-y: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);

  /* ---------- Shape ---------- */
  --r-xs: 4px;
  --r-sm: 6px;    /* buttons, inputs */
  --r-md: 8px;    /* cards, panels */
  --r-lg: 10px;   /* hero cards, register wrap */
  --r-pill: 999px;/* status badges, rail counts only */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(11, 31, 63, .06), 0 1px 1px rgba(11, 31, 63, .04);
  --shadow-2: 0 4px 12px rgba(11, 31, 63, .08), 0 1px 3px rgba(11, 31, 63, .06);
  --shadow-3: 0 18px 40px rgba(8, 23, 47, .28);

  /* ---------- Z-index ---------- */
  --z-sticky: 1020;
  --z-topbar: 1025;
  --z-rail: 1030;
  --z-dropdown: 1050;
  --z-skip: 2000;

  /* ---------- Targets & layout ---------- */
  --tap: 2.75rem;        /* 44px minimum for buttons, inputs, icon buttons */
  --tap-sm: 2.25rem;     /* 36px, secondary btn-sm only */
  --rail-w: 248px;
  --topbar-h: 56px;
  --admin-max: 1480px;
  --motion: 150ms ease;

  /* ---------- Patterns (relative to /css, resolves on the same origin) ---------- */
  --img-grid: url('../img/grid-pattern.svg');
  --img-bridge: url('../img/bridge-line.svg');

  /* ---------- Bootstrap 5.3 variable overrides ---------- */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 29, 36, 51;
  --bs-body-bg: var(--white);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-heading-color: var(--navy-900);
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--surface);
  --bs-tertiary-bg: var(--navy-50);
  --bs-emphasis-color: var(--navy-900);
  --bs-primary: var(--navy-700);
  --bs-primary-rgb: 20, 48, 92;
  --bs-success: var(--success);
  --bs-success-rgb: 27, 107, 71;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 138, 84, 0;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 164, 42, 42;
  --bs-info: var(--info);
  --bs-info-rgb: 29, 94, 153;
  --bs-link-color: var(--navy-700);
  --bs-link-color-rgb: 20, 48, 92;
  --bs-link-hover-color: var(--navy-600);
  --bs-link-hover-color-rgb: 35, 75, 133;
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-lg);
  --bs-focus-ring-color: rgba(43, 102, 196, .25);
  --bs-breadcrumb-divider: "\F285";               /* bootstrap-icons chevron-right */
  --bs-breadcrumb-divider-color: var(--muted);
  --bs-offcanvas-bg: var(--navy-900);
  --bs-offcanvas-color: var(--navy-200);
  --bs-offcanvas-width: 288px;
  --bs-offcanvas-border-width: 0;
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-box-shadow: var(--shadow-2);
  --bs-dropdown-link-active-bg: var(--navy-700);
  --bs-dropdown-link-hover-bg: var(--navy-50);
  --bs-dropdown-link-color: var(--ink);
  --bs-modal-border-radius: var(--r-lg);
  --bs-modal-border-color: var(--line);
  --bs-modal-box-shadow: var(--shadow-3);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--r-md);
}