/* ==========================================================================
   Shadowed.World design tokens
   --------------------------------------------------------------------------
   Load this file FIRST in every template. Every other stylesheet and every
   inline style consumes these custom properties instead of raw hex values.

   Contrast ratios quoted below were computed with the WCAG 2.x relative
   luminance formula (see DESIGN_SYSTEM.md for the script). AA requires
   4.5:1 for body text and 3:1 for large text (18px+ regular, 14px+ bold)
   and for non-text UI boundaries.
   ========================================================================== */

:root {
  /* ---------- Backgrounds: the shadowed near-black world ---------- */
  --color-void: #000000;            /* landing page ground, fullscreen overlays */
  --color-bg-deep: #111111;         /* landing radial centre, lore modal, admin page ground */
  --color-bg: #1a1a1a;              /* page background on every app page */
  --color-surface-sunken: #222222;  /* dropdown, help/donate containers, card footers */
  --color-surface: #2a2a2a;         /* panels, modals, cards */
  --color-surface-2: #333333;       /* inputs, grid cells, header profile chip */
  --color-surface-3: #3a3a3a;       /* hover on surface-2, layer-locked cells */
  --color-surface-hover: #444444;   /* hover on grid cells and dropdown items */
  --color-surface-4: #4a4a4a;       /* dropdown item hover */
  --color-surface-muted: #555555;   /* disabled buttons, common-rarity chips */
  --color-white: #ffffff;           /* solved / role-solved cells only */

  /* ---------- Text tiers (all checked against #2a2a2a, the darkest surface they sit on
       that is lighter than the page; ratios against #1a1a1a are higher) ---------- */
  --color-text-strong: #ffffff;     /* 15.3:1 on bg, 12.6:1 on surface */
  --color-text: #f0f0f0;            /* 15.3:1 on #1a1a1a, 12.6:1 on #2a2a2a */
  --color-text-secondary: #e0e0e0;  /* 10.9:1 on #2a2a2a, 9.6:1 on #333333 */
  --color-text-tertiary: #cccccc;   /* 8.9:1 on #2a2a2a, 7.9:1 on #333333 */
  --color-text-muted: #aaaaaa;      /* 6.2:1 on #2a2a2a */
  --color-text-faint: #999999;      /* 5.0:1 on #2a2a2a (the floor; never go darker on a surface) */
  --color-text-on-light: #333333;   /* 12.6:1 on #ffffff, 7.6:1 on gold #f1c40f */
  --color-text-on-bright: #0b1a10;  /* 7.5:1 on success #2fbf71, 9.1:1 on WhatsApp #25d366 */

  /* ---------- Accent: the purple that marks the current tab, admin, rare things ---------- */
  --color-accent: #8e44ad;          /* white text on it: 5.9:1 */
  --color-accent-hover: #7d3c98;    /* white text on it: 7.1:1 */
  --color-accent-soft: #d7b8f3;     /* as text on #1a1a1a: 10.0:1, on #2a2a2a: 8.2:1; also the focus ring */
  --color-accent-glow: rgba(142, 68, 173, 0.7);

  /* ---------- Action: the slate blue used for primary buttons and avatars ---------- */
  --color-action: #4a6b8a;          /* white text on it: 5.6:1 */
  --color-action-hover: #3d5a75;    /* white text on it: 7.2:1 (replaces #5a7b9a, which was 4.4:1) */

  /* ---------- Neutral button (replaces #7f8c8d, which was 3.5:1 with white) ---------- */
  --color-neutral: #6c757d;         /* white text on it: 4.7:1 */
  --color-neutral-hover: #5a6268;

  /* ---------- Semantic: success ---------- */
  --color-success: #2fbf71;         /* as a fill with --color-text-on-bright: 7.5:1; as text on #1a1a1a: 7.3:1 */
  --color-success-hover: #26a862;
  --color-success-text: #5fd39a;    /* as text on #2a2a2a: 7.7:1 */
  --color-success-tint: rgba(47, 191, 113, 0.12);
  /* Replaces #2ecc71, which was 2.1:1 with white text on the landing CTA. */

  /* ---------- Semantic: error ---------- */
  --color-error: #c0392b;           /* white text on it: 5.4:1 (replaces #e74c3c fill, 3.8:1) */
  --color-error-hover: #a93226;
  --color-error-text: #ff8a7a;      /* as text on #2a2a2a: 6.3:1, on #1a1a1a: 7.6:1 */
  --color-error-tint: rgba(192, 57, 43, 0.15);

  /* ---------- Semantic: warning ---------- */
  --color-warning: #f39c12;         /* with --color-bg text on it: 7.9:1; as text on #2a2a2a: 6.5:1 */
  --color-warning-text: #ffb347;    /* as text on #2a2a2a: 8.1:1 */

  /* ---------- Semantic: info ---------- */
  --color-info: #2471a3;            /* white text on it: 5.3:1 */
  --color-info-text: #5dade2;       /* as text on #2a2a2a: 5.8:1 (replaces #3498db text, 4.55:1 borderline) */

  /* ---------- Gold: aces, solutions, legendary ---------- */
  --color-gold: #f1c40f;            /* as text on #2a2a2a: 8.6:1; with --color-text-on-light on it: 7.6:1 */
  --color-gold-bright: #ffd700;

  /* ---------- Slate family (badge cards, layer indicator, profile card) ---------- */
  --color-slate: #2c3e50;           /* white text on it: 11.0:1 */
  --color-slate-2: #34495e;

  /* ---------- Grid cell states (must not be colour-only; see grid glyph rules in styles.css) ---------- */
  --color-cell: var(--color-surface-2);
  --color-cell-viewed: #a9a9a9;     /* with --color-bg glyph on it: 7.4:1 */
  --color-cell-incorrect: var(--color-error);
  --color-cell-solved: var(--color-white);
  --color-cell-layer-locked: var(--color-surface-3);

  /* ---------- Map stats ---------- */
  --color-stat-fail: #ff6b6b;       /* as bold 11px text on #2a2a2a: 5.2:1 */
  --color-stat-ace: #85dcff;        /* as text on #2a2a2a: 9.4:1 */

  /* ---------- Layer identity colours (titles on the map, data driven) ---------- */
  --color-layer-freedom: #90ee90;
  --color-layer-stars: #ffff00;
  --color-layer-space: #c39bd3;     /* was #800080 (1.5:1 on #2a2a2a); lightened to 6.1:1 */
  --color-layer-clouds: #ffffff;
  --color-layer-sky: #87ceeb;
  --color-layer-ocean: #1e90ff;
  --color-layer-surface: #cf9a6a;   /* was #8b4513 (2.0:1 on #2a2a2a); lightened to 5.8:1 */
  --color-layer-crust: #d9905e;     /* was #a0522d (2.6:1 on #2a2a2a); lightened to 5.5:1 */
  --color-layer-mantle: #ffa500;
  --color-layer-core: #ffd700;

  /* ---------- Badge rarity ---------- */
  --color-rarity-common: #777777;
  --color-rarity-uncommon: #3498db;
  --color-rarity-rare: #9b59b6;
  --color-rarity-epic: #d35400;
  --color-rarity-legendary: var(--color-gold);

  /* ---------- Discord surface (replaces #72767d on #36393f, which was 2.5:1) ---------- */
  --color-discord-bg: #36393f;
  --color-discord-text: #dcddde;    /* 8.5:1 on #36393f */
  --color-discord-muted: #b9bbbe;   /* 6.0:1 on #36393f */
  --color-discord-blurple: #5865f2; /* white text on it: 4.6:1 */
  --color-discord-online: #43b581;
  --color-discord-idle: #faa61a;
  --color-discord-dnd: #f04747;

  /* ---------- Share brand colours ---------- */
  --color-brand-x: #000000;
  --color-brand-x-hover: #222222;
  --color-brand-facebook: #4267b2;  /* white text: 5.5:1 */
  --color-brand-facebook-hover: #375899;
  --color-brand-whatsapp: #25d366;  /* use --color-text-on-bright on it: 9.1:1 */
  --color-brand-whatsapp-hover: #1ebc5c;
  --color-brand-email: #d62839;     /* white text: 5.0:1 (replaces #ea4335, 3.9:1) */
  --color-brand-email-hover: #b3261e;

  /* ---------- Borders ---------- */
  --color-border-subtle: #333333;
  --color-border: #444444;
  --color-border-strong: #555555;
  --color-border-faint: rgba(255, 255, 255, 0.1);
  --color-border-faint-2: rgba(255, 255, 255, 0.2);

  /* ---------- Focus ring: one visible ring everywhere ---------- */
  --color-focus: var(--color-accent-soft);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* ---------- Overlays ---------- */
  --overlay-modal: rgba(0, 0, 0, 0.8);
  --overlay-fullscreen: rgba(0, 0, 0, 0.9);
  --overlay-tooltip: rgba(0, 0, 0, 0.85);
  --overlay-tint: rgba(0, 0, 0, 0.1);
  --overlay-tint-2: rgba(0, 0, 0, 0.2);
  --overlay-light: rgba(255, 255, 255, 0.05);
  --overlay-light-2: rgba(255, 255, 255, 0.1);

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---------- Typography ---------- */
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 1.1rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.6rem;
  --text-3xl: 1.8rem;
  --text-display: 3.5rem;
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  --tracking-wide: 1px;
  --tracking-wider: 2px;
  --tracking-widest: 3px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 5px 25px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 12px var(--color-accent-glow);

  /* ---------- Z-index tiers ---------- */
  --z-base: 1;
  --z-panel: 5;
  --z-panel-top: 10;
  --z-cell-hover: 20;
  --z-header: 100;
  --z-confirm: 150;
  --z-modal: 200;
  --z-header-controls: 200;
  --z-dropdown: 300;
  --z-tooltip: 1000;
  --z-fullscreen: 2000;
  --z-toast: 10000;

  /* ---------- Motion ---------- */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-reveal: 1s;
  --ease-standard: ease;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* ---------- Tap targets ---------- */
  --tap-min: 24px;   /* WCAG 2.2 minimum for the puzzle grid */
  --tap-comfort: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-normal: 0.01s;
    --duration-slow: 0.01s;
    --duration-reveal: 0.01s;
  }
}

/* ==========================================================================
   Global primitives that every page relies on
   ========================================================================== */

/* One visible focus ring for keyboard users, everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Hide from sighted users, keep for assistive tech. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: invisible until focused, then pinned top-left. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-text-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-2);
}