/*
 * Design tokens: every color, font, size, spacing step, radius, shadow and
 * layer the site uses. Restyling the site means changing values here.
 * The values are the "G · Atlas Ink" look (docs/missioncall-redesign-brief.md):
 * navy ink, blue accent, Newsreader headlines over Manrope.
 *
 * The fonts load from Google Fonts through a <link> in each page's <head>.
 *
 * This file only declares custom properties, so it is safe to load on any page.
 * Brand colors of third parties (Google, Facebook, &COLLAR creatives) are not
 * tokens; they stay literal where they are used.
 *
 * Translucent variants are spelled out (e.g. --color-primary-a35) rather than
 * derived with color-mix(), which older iOS Safari versions don't support.
 * When a base color changes, update its translucent variants with it.
 */
/* Native controls (select menus, autofill suggestions, scrollbars) follow
   the page, not the device's dark mode: the site is a light design. */
:root {
  color-scheme: light;
  /* ---- Brand ---- */
  --color-primary: #2b63d9;
  --color-primary-2: #14213d;
  --color-primary-hover: #1f4fb8;
  --color-primary-2-hover: #0e182d;
  --color-primary-active: rgba(255, 255, 255, 0.12);           /* current page in the top nav */
  --color-primary-bright: #2b63d9;           /* hero buttons */
  --color-primary-ink: #ffffff;              /* text on primary surfaces */
  --color-primary-a10: rgba(43, 99, 217, 0.1);
  --color-primary-a35: rgba(43, 99, 217, 0.35);
  --color-primary-a45: rgba(43, 99, 217, 0.45);
  --color-primary-a60: rgba(43, 99, 217, 0.6);
  --color-primary-2-a25: rgba(20, 33, 61, 0.25);
  --color-primary-2-a40: rgba(20, 33, 61, 0.4);
  --color-primary-bright-a80: rgba(43, 99, 217, 0.8);
  --color-primary-bright-a90: rgba(43, 99, 217, 0.9);
  --gradient-primary: linear-gradient(135deg, var(--color-primary-2) 0%, var(--color-primary-2) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-2-hover) 0%, var(--color-primary-2-hover) 100%);
  --color-indigo: #4f46e5;
  --color-violet: #7c3aed;
  --color-violet-strong: #6d28d9;
  --color-violet-ink: #5b21b6;
  --color-violet-a08: rgba(139, 92, 246, 0.08);
  --color-violet-a10: rgba(139, 92, 246, 0.1);
  --color-violet-a15: rgba(139, 92, 246, 0.15);
  --color-violet-a20: rgba(139, 92, 246, 0.2);
  --color-purple: #800080;                   /* CSS "purple" */
  --color-purple-a10: rgba(147, 51, 234, 0.1);
  --color-purple-a20: rgba(147, 51, 234, 0.2);

  --color-accent: #2b63d9;
  --color-accent-soft: #8db2ff;
  --color-accent-strong: #1e4bb0;
  --color-accent-a07: rgba(43, 99, 217, 0.07);
  --color-accent-soft-a10: rgba(43, 99, 217, 0.1);
  --color-accent-soft-a20: rgba(43, 99, 217, 0.2);
  --color-accent-soft-a30: rgba(43, 99, 217, 0.3);
  --color-sky: var(--color-primary);
  --color-sky-light: #38bdf8;
  --color-sky-ink: var(--color-text);
  --color-sky-surface: var(--color-surface-soft);
  --color-link: #1f4fb8;
  --color-link-hover: #163c8e;
  --color-link-on-dark: #8db2ff;
  --color-link-on-dark-hover: #c9d6f2;
  --color-navy: #14213d;
  --color-navy-2: #1e4a8a;
  --color-navy-3: #163261;
  --color-teal-ink: #0f4c75;
  --color-share-blue: #1a73e8;
  --color-share-green: #34a853;
  --color-store-cta: #ea4335;
  --color-slate: #5b6886;                    /* legacy footer / stats header */

  /* ---- Page backgrounds ---- */
  --gradient-page: linear-gradient(180deg, #14213d 0%, #14213d 100%);
  --color-page-dark: #14213d;

  /* ---- Surfaces ---- */
  --color-surface: #ffffff;
  --color-surface-soft: #f5f7fb;
  --color-surface-muted: #eef2f8;
  --color-surface-subtle: #e6ecf5;
  --color-surface-tint: #e8effd;
  --color-surface-blue: #e8effd;
  --color-surface-indigo: #eef2ff;
  --color-surface-inverse: #000000;
  --color-surface-dark: #14213d;
  --color-surface-a50: rgba(255, 255, 255, 0.5);
  --color-surface-a85: rgba(255, 255, 255, 0.85);
  --color-surface-a90: rgba(255, 255, 255, 0.9);
  --color-surface-a95: rgba(255, 255, 255, 0.95);

  /* Translucent white / black overlays */
  --overlay-light-10: rgba(255, 255, 255, 0.1);
  --overlay-light-15: rgba(255, 255, 255, 0.15);
  --overlay-light-20: rgba(255, 255, 255, 0.2);
  --overlay-light-25: rgba(255, 255, 255, 0.25);
  --overlay-light-30: rgba(255, 255, 255, 0.3);
  --overlay-light-40: rgba(255, 255, 255, 0.4);
  --overlay-light-60: rgba(255, 255, 255, 0.6);
  --overlay-light-70: rgba(255, 255, 255, 0.7);
  --overlay-light-80: rgba(255, 255, 255, 0.8);
  --overlay-dark-04: rgba(20, 33, 61, 0.04);
  --overlay-dark-06: rgba(20, 33, 61, 0.06);
  --overlay-dark-08: rgba(20, 33, 61, 0.08);
  --overlay-dark-10: rgba(20, 33, 61, 0.1);
  --overlay-dark-15: rgba(20, 33, 61, 0.15);
  --overlay-dark-20: rgba(20, 33, 61, 0.2);
  --overlay-dark-30: rgba(20, 33, 61, 0.3);
  --overlay-dark-40: rgba(20, 33, 61, 0.4);
  --overlay-dark-50: rgba(20, 33, 61, 0.5);
  --overlay-dark-60: rgba(20, 33, 61, 0.6);
  --overlay-dark-70: rgba(20, 33, 61, 0.7);
  --overlay-dark-85: rgba(20, 33, 61, 0.85);
  --color-scrim: var(--overlay-dark-40);

  /* ---- Borders ---- */
  --color-border: #c9d4e6;
  --color-border-soft: #e1e7f1;
  --color-border-faint: #eef2f8;
  --color-border-mid: #9aa6bf;
  --color-border-strong: #14213d;
  --color-border-inverse: #ffffff;
  --color-border-on-dark: #3a4e78;          /* outlined buttons on the navy header */
  --color-border-indigo: #c7d2fe;
  --color-border-gray-a30: rgba(156, 163, 175, 0.3);

  /* ---- Text ---- */
  --color-text-strong: #14213d;
  --color-text: #14213d;
  --color-text-secondary: #3a4660;
  --color-text-tertiary: #4a5875;
  --color-text-muted: #5b6886;
  --color-text-faint: #8a95ae;
  --color-text-slate: #5b6886;
  --color-text-slate-strong: #3a4660;
  --color-text-slate-faint: #9aa6bf;
  --color-text-neutral: #14213d;
  --color-text-neutral-2: #3a4660;
  --color-text-neutral-3: #4a5875;
  --color-text-neutral-4: #5b6886;
  --color-text-neutral-5: #8a95ae;
  --color-text-neutral-6: #9aa6bf;
  --color-text-neutral-7: #9aa6bf;
  --color-text-on-dark: #c9d6f2;
  --color-text-inverse: #ffffff;
  --color-ink: #14213d;
  --color-neutral-mid: #808080;              /* CSS "gray" */

  /* ---- Status ---- */
  --color-danger: #dc2626;
  --color-danger-soft: #ef4444;
  --color-danger-strong: #b91c1c;
  --color-danger-legacy: #f44336;
  --color-danger-pure: #ff0000;              /* CSS "red" */
  --color-danger-soft-a10: rgba(239, 68, 68, 0.1);
  --color-danger-soft-a30: rgba(239, 68, 68, 0.3);
  --color-success: #15803d;
  --color-success-mid: #16a34a;
  --color-success-alt: #059669;
  --color-success-ink: #047857;
  --color-success-bright: #10b981;
  --color-success-legacy: #4caf50;
  --color-success-pure: #008000;             /* CSS "green" */
  --color-success-surface: #ecfdf5;
  --color-success-bright-a10: rgba(16, 185, 129, 0.1);
  --color-success-bright-a20: rgba(16, 185, 129, 0.2);
  --color-success-mid-a10: rgba(34, 197, 94, 0.1);
  --color-success-mid-a30: rgba(34, 197, 94, 0.3);
  --color-warning: #d97706;
  --color-warning-soft: #f59e0b;
  --color-warning-surface: #fef3c7;
  --color-warning-legacy: #ff9800;
  --color-warning-pure: #ffa500;             /* CSS "orange" */
  --color-warning-soft-a10: rgba(245, 158, 11, 0.1);
  --color-warning-soft-a30: rgba(245, 158, 11, 0.3);
  --color-orange: #ea580c;
  --color-pink: #be185d;
  --color-pink-a07: rgba(190, 24, 93, 0.07);
  --color-info-legacy: #2196f3;
  --color-info-pure: #1e90ff;                /* CSS "dodgerblue" */
  --color-highlight: #ffd217;
  --color-highlight-a50: rgba(255, 204, 0, 0.5);
  --color-highlight-a70: rgba(255, 204, 0, 0.7);
  --color-turquoise: #00ced1;
  --color-muted-control: #cccccc;
  --color-merch: var(--color-text);
  --color-merch-a05: var(--color-surface-soft);
  --color-merch-a20: var(--color-border-soft);
  --color-medal-gold: #ffd700;
  --color-medal-gold-2: #ffed4e;
  --color-medal-silver: #c0c0c0;
  --color-medal-bronze: #cd7f32;

  /* ---- Data editor (editor/index.html) ---- */
  --color-editor-primary: #2c7be5;
  --color-editor-primary-hover: #1f6ed6;
  --color-editor-primary-ink: #0e4fad;
  --color-editor-primary-a35: rgba(44, 123, 229, 0.35);
  --color-editor-primary-hover-a30: rgba(31, 110, 214, 0.3);
  --color-editor-primary-hover-a40: rgba(31, 110, 214, 0.4);
  --color-editor-selected: #d7e7ff;
  --color-editor-border: #c6d9ff;
  --color-editor-success: #2ead5c;
  --color-editor-warning: #e38b00;
  --color-editor-warning-surface: #fff2dd;
  --color-editor-danger: #d9534f;
  --color-editor-danger-surface: #fdeaea;
  --color-editor-muted: #7c8899;
  --color-success-legacy-hover: #45a049;

  /* ---- Type ---- */
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-system: var(--font-body);
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: monospace;
  --font-code: 'Courier New', monospace;
  --font-arial: var(--font-body);
  --font-helvetica: var(--font-body);
  --font-lucida: var(--font-body);

  /* rem so text follows the visitor's browser font size; 1rem = 16px by default */
  --font-size-2xs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 0.9375rem;   /* 15px */
  --font-size-lg: 1rem;        /* 16px */
  --font-size-lg-plus: 1.0625rem; /* 17px */
  --font-size-xl: 1.125rem;    /* 18px */
  --font-size-2xl: 1.25rem;    /* 20px */
  --font-size-3xl: 1.375rem;   /* 22px */
  --font-size-4xl: 1.5rem;     /* 24px */
  --font-size-5xl: 1.75rem;    /* 28px */
  --font-size-6xl: 2rem;       /* 32px */
  /* Off-scale sizes kept exact for the components that use them */
  --font-size-hero-title: 3.2rem;
  --font-size-hero-title-sm: 2.2rem;
  --font-size-hero-subtitle: 1.3rem;
  --font-size-stat-number: 1.8rem;
  --font-size-stat-number-sm: 1.6rem;
  --font-size-popup-heading: 1.2rem;
  --font-size-code: 2.5rem;
  --font-size-label: 0.7rem;             /* small uppercase labels (facts) */
  --font-size-fact-value: 1.55rem;
  --font-size-counter-label: 0.72rem;
  --font-size-list: 0.82rem;             /* ranked lists (facts) */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ---- Spacing ---- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Shape ---- */
  --radius-2xs: 2px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 3px rgba(20, 33, 61, 0.1);
  --shadow-sm: 0 2px 6px rgba(20, 33, 61, 0.1);
  --shadow-md: 0 4px 12px rgba(20, 33, 61, 0.1);
  --shadow-card: 0 6px 18px rgba(20, 33, 61, 0.12);
  --shadow-card-soft: 0 4px 14px rgba(20, 33, 61, 0.08);
  --shadow-card-hairline: 0 1px 6px rgba(20, 33, 61, 0.06);
  --shadow-panel: 0 8px 24px rgba(20, 33, 61, 0.1);
  --shadow-panel-lg: 0 12px 32px rgba(20, 33, 61, 0.12);
  --shadow-raised: 0 6px 18px rgba(20, 33, 61, 0.16);
  --shadow-dropdown: 0 10px 30px rgba(20, 33, 61, 0.2);
  --shadow-lg: 0 12px 30px rgba(20, 33, 61, 0.2);
  --shadow-xl: 0 8px 20px rgba(20, 33, 61, 0.28);
  --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-sheet: 0 16px 40px rgba(20, 33, 61, 0.2);
  --shadow-sheet-strong: 0 20px 60px rgba(20, 33, 61, 0.35);
  --shadow-primary: 0 8px 20px var(--color-primary-a35);
  --shadow-primary-hover: 0 12px 26px var(--color-primary-a45);
  --shadow-glow: 0 0 5px var(--color-highlight-a50);
  --shadow-glow-strong: 0 0 10px var(--color-highlight-a70);
  --shadow-flag: 2px 2px 1px #000000;
  --shadow-text: 1px 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-text-soft: 0 2px 10px rgba(0, 0, 0, 0.3);

  /* ---- Layers ----
     Small local values (1, 2, 3, 10, 20) only order siblings and stay literal. */
  --z-store-banner: 998;
  --z-store-header: 999;
  --z-header: 1000;
  --z-header-menu: 1001;
  --z-popup: 1100;                           /* mission details */
  --z-popup-2: 1200;                         /* guess, info, game menu */
  --z-popup-3: 1300;                         /* email */
  --z-popup-4: 1400;                         /* my guess */
  --z-popup-top: 1500;                       /* confirmations */
  --z-modal: 2000;
  --z-modal-top: 3000;
  --z-toast: 9999;
  --z-max: 10000;

  /* ---- Map ---- */
  --map-border: #3e4652;
  --map-border-opacity: 0.7;
  --map-border-weight: 1;
  --map-fill-opacity: 0.6;
  --map-selected: #2b63d9;
  --map-selected-weight: 3;
  --map-selected-opacity: 1;
  --map-region-1: #ff9aa2;
  --map-region-2: #b5ead7;
  --map-region-3: #ffdac1;
  --map-region-4: #c7ceea;
  --map-region-5: #e2f0cb;
  --map-region-6: #ffb7b2;
  --map-region-7: #a2d2ff;
  --map-region-8: #f0e6aa;
  --map-region-9: #dcc1ff;
  --map-edit-outline: #0000ff;              /* CSS "blue" */
  --map-edit-vertex: #0c1ee2;
  --map-edit-midpoint: var(--color-info-legacy);
  --map-edit-midpoint-hover: #1976d2;
  --map-edit-active: #f32128;
  --map-edit-active-a50: rgba(243, 33, 40, 0.5);
  --map-water: #aad3df;                      /* baked into the OSM tiles; reference only */

  /* ---- Charts (facts page) ---- */
  --chart-1: var(--color-accent);
  --chart-2: var(--color-success-mid);
  --chart-3: var(--color-orange);
  --chart-4: var(--color-violet);
  --chart-5: var(--color-warning);
  --chart-6: var(--color-danger);
  --chart-7: #0891b2;
  --chart-8: var(--color-pink);
  --chart-9: #065f46;
  --chart-10: #92400e;
  --chart-11: var(--color-accent-strong);
  --chart-12: #166534;
  --chart-grid: #f1f5f9;

  /* ---- Ads ---- */
  --ad-label: var(--color-text-muted);
  --ad-rainbow-1: #ff0000;                   /* "Get 10% off!" color cycle */
  --ad-rainbow-2: #ff7f00;
  --ad-rainbow-3: #006400;
  --ad-rainbow-4: #0000ff;
  --ad-rainbow-5: #8b00ff;

  /* ---- Breakpoints (reference only: custom properties don't work in @media) ----
     380px · phone 480px · 600px · tablet 768px · 900px · nav collapses at 1180px */
}