/* Design tokens (ARCHITECTURE 14.5).

   The first three blocks are the export's tokens/colors.css, spacing.css and
   typography.css, values verbatim (round 25), declared on the three scope
   classes instead of :root so a theme's variables cannot collide. The last
   block holds the app tokens prefixed --gc-: values the README and the frames
   use that the token files lack. The frames and README win over the
   marketing radii in spacing.css: cards, inputs and buttons use --gc-radius.
   Fonts are self-hosted in fonts.css. */
.gc-admin, .gc-portal, .gc-range {
  /* Navy - brand ground */
  --navy-900: #041D41;
  --navy-800: #0A2A56;
  --navy-ink: #0E1A2B;
  /* Red - action + accent */
  --red-500: #D31F24;
  --red-400: #E5353A;
  --red-600: #B8171C;
  --red-700: #AE1A1F;
  --red-ink: #8A2226;
  --red-tint: #FBE9E9;
  /* Slate - text on light */
  --slate-700: #22314A;
  --slate-600: #45536A;
  --slate-500: #5C6B80;
  --slate-400: #7A8798;
  --slate-300: #A9B4C4;
  /* Lines + surfaces */
  --line-strong: #BFC8D6;
  --line-mid: #C9D2DE;
  --line: #DCE2EB;
  --line-soft: #E2E7EE;
  --surface-muted: #E8ECF2;
  --paper: #F4F6F9;
  --paper-white: #FFFFFE;
  --white: #FFFFFF;
  /* Text on navy */
  --on-dark-1: #F4F6F9;
  --on-dark-2: #CDD7E4;
  --on-dark-3: #B7C7DF;
  --on-dark-4: #AAB7C9;
  --on-dark-5: #9FAEC4;
  --on-dark-6: #8FA6C6;
  --on-dark-line: rgba(255,255,255,.3);
  --on-dark-hover: rgba(255,255,255,.16);
  /* Status */
  --green-600: #1F7A44;
  --green-live: #48D67A;
  --amber-500: #C8901A;
  --amber-ink: #8A6A12;
  --amber-deep: #4A3A08;
  --amber-tint: #FCF4E0;

  /* Semantic aliases */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-raised: var(--paper-white);
  --surface-inverse: var(--navy-900);
  --surface-inverse-2: var(--navy-800);
  --text-strong: var(--navy-900);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-inverse: var(--on-dark-1);
  --text-inverse-body: var(--on-dark-2);
  --text-eyebrow: var(--red-700);
  --text-link: var(--red-600);
  --action-primary: var(--red-500);
  --action-primary-hover: var(--red-400);
  --border-default: var(--line);
  --border-input: var(--line-strong);
  --status-open: var(--green-600);
  --status-closed: var(--red-500);
  --status-warning: var(--amber-500);
}
.gc-admin, .gc-portal, .gc-range {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-7: 28px;
  --space-8: 34px;
  --space-9: 52px;
  --space-10: 64px;
  --space-11: 88px;
  --gutter: 24px;
  --container: 1280px;
  --container-narrow: 1180px;

  --radius-tag: 4px;
  --radius-input: 12px;
  --radius-panel: 16px;
  --radius-card: 20px;
  --radius-band: 26px;
  --radius-pill: 999px;

  --shadow-panel: 0 26px 60px rgba(2,15,36,.5);
  --shadow-illustration: 0 24px 40px rgba(4,29,65,.55);
  --blur-header: blur(8px);
  --rule-accent: 3px solid var(--red-500);
}
.gc-admin, .gc-portal, .gc-range {
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --type-h1: 700 clamp(48px,5.6vw,82px)/0.92 var(--font-display);
  --type-h2: 700 clamp(38px,4.6vw,66px)/0.98 var(--font-display);
  --type-h3: 700 28px/1.05 var(--font-display);
  --type-h4: 700 22px/1 var(--font-display);
  --type-body-lg: 400 18px/1.6 var(--font-body);
  --type-body: 400 16px/1.6 var(--font-body);
  --type-body-sm: 400 15px/1.55 var(--font-body);
  --type-caption: 400 13px/1.6 var(--font-body);
  --type-label: 600 12px/1 var(--font-body);
  --type-button: 700 14px/1 var(--font-body);
  --type-nav: 600 12px/1 var(--font-body);
  --type-eyebrow: 500 12px/1 var(--font-mono);
  --type-data: 500 11px/1 var(--font-mono);

  --tracking-display: 0;
  --tracking-eyebrow: .22em;
  --tracking-button: .1em;
  --tracking-label: .1em;
  --tracking-nav: .08em;
}
.gc-admin, .gc-portal, .gc-range {
  /* Radii (README: 10px cards, inputs and buttons; 999px pills; 4px tags). */
  --gc-radius: 10px;
  --gc-radius-pill: 999px;
  --gc-radius-tag: 4px;
  --gc-radius-dialog: 12px;
  --gc-radius-small: 8px;
  /* Status inks and tints (README, Status). */
  --gc-green-ink: #17613A;
  --gc-green-tint: #E3F3E9;
  --gc-amber-ink: #6E4F08;
  --gc-amber-row: #FFFBF0;
  --gc-error: #9E1B20;
  --gc-info-tint: #E6EDF7;
  --gc-error-line: #F2B8BA;
  --gc-row-selected: #FDF3F3;
  --gc-later-surface: #FBFCFD;
  --gc-row-rule: #EEF1F5;
  --gc-bad-body: #5A1215;
  --gc-struck: #9AA5B5;
  /* Green callout and the bulk progress bar (Admin 2, screens 2 and 6). */
  --gc-green-line: #B7DEC5;
  --gc-green-deep: #0F3F25;
  --gc-progress-green: #3FB26E;
  /* Banner tones (Admin 2, C6 banners). */
  --gc-banner-info-ink: #0A2A56;
  --gc-banner-info-line: #B7C7DF;
  --gc-banner-bad-ink: #7A1519;
  --gc-banner-bad-line: #F0C4C5;
  --gc-banner-wait-ink: #3F2E05;
  --gc-banner-wait-line: #EBD39A;
  --gc-banner-done-ink: #22314A;
  --gc-banner-done-line: #CFD9E6;
  /* Status chips on navy (C7, dark). */
  --gc-dark-good-tint: rgba(72,214,122,.16);
  --gc-dark-good-ink: #7BE3A0;
  --gc-dark-wait-tint: rgba(232,178,58,.18);
  --gc-dark-wait-ink: #F2C868;
  --gc-dark-wait-dot: #E8B23A;
  --gc-dark-bad-tint: rgba(255,99,99,.18);
  --gc-dark-bad-ink: #FF9B9B;
  --gc-dark-bad-dot: #FF6B6B;
  --gc-dark-done-tint: rgba(255,255,255,.1);
  --gc-dark-info-tint: rgba(143,166,198,.2);
  --gc-dark-info-ink: #DCE5F1;
  /* The applicant's status page (Member 2, 36): the ring of a step waiting
     on the applicant, and the words of a waiting and a declined message. */
  --gc-amber-ring: #F3DDA8;
  --gc-amber-text: #3F2E05;
  --gc-red-text: #7A1519;
  /* Focus, shadows and overlays. */
  --gc-focus: 3px solid #D31F24;
  --gc-focus-offset: 2px;
  --gc-shadow-admin: 0 12px 32px rgba(4,29,65,.14);
  --gc-shadow-menu: 0 14px 30px rgba(4,29,65,.18);
  --gc-shadow-dialog: 0 24px 60px rgba(4,29,65,.25);
  --gc-shadow-toast: 0 10px 24px rgba(4,29,65,.25);
  --gc-shadow-drawer: -18px 0 40px rgba(4,29,65,.16);
  --gc-shadow-picked: 0 6px 18px rgba(211,31,36,.12);
  --gc-ring-current: 0 0 0 4px rgba(4,29,65,.15);
  --gc-overlay: rgba(4,29,65,.18);
  --gc-overlay-dialog: rgba(4,29,65,.4);
  /* The C8 select's mark (Admin 18, 18a and 18b `.in.sel::after`; the
     README's C8): the frames' filled down triangle (U+25BE at 12px), 6px
     wide and 6px tall in --slate-600, drawn at the right of a 12px box and
     1px below its middle, where the frames' glyph sits. */
  --gc-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 4h6l-3 6z' fill='%2345536A'/%3E%3C/svg%3E");
  /* Range mode, C18 member card, C19 scanner and C23 offline (Admin 1, Admin 8, Admin 15). */
  --gc-offline-line: #E8CF8E;
  --gc-offline-ink: #5C4306;
  --gc-synced-line: #A9D7B8;
  --gc-scan-ground: #0B0F16;
  --gc-scan-stripe-1: #141B26;
  --gc-scan-stripe-2: #101620;
  --gc-scan-dim: rgba(0,0,0,.45);
  --gc-scan-ghost-line: rgba(255,255,255,.4);
  --gc-card-text: #E3EAF5;
  --gc-card-photo: #123566;
  --gc-card-rule: rgba(255,255,255,.14);
  --gc-shadow-card: 0 20px 44px rgba(4,29,65,.35);
  --gc-phone-radius: 14px;
  /* The club's colors (Settings, Branding; contrast-checked there). On the
     portal Site\Brand prints the club's own after portal.css; the hover is
     the accent's under the pointer (the gunclub.app accent's is --red-400).
     The accent is a fill, a light one too (Phase 10 decision 26): the text
     on it is --club-on-accent, white or dark, and where the accent is text
     on white it is --club-accent-ink, a shade of it that reads. */
  --club-primary: #041D41;
  --club-accent: #D31F24;
  --club-accent-hover: #E5353A;
  --club-on-accent: #FFFFFF;
  --club-accent-ink: #D31F24;
}