/* ==========================================================================
   Void Walkers — Design Tokens
   Locked dark theme. The accent is the only token that changes at runtime
   (html[data-accent="…"], set from the settings panel).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Space ---- */
  --bg: #04050b;
  --bg-raised: #0a0c17;
  --void: #000000;

  /* ---- Surfaces & lines ---- */
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.085);
  --panel: rgba(9, 11, 22, 0.78);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.3);

  /* ---- Text ---- */
  --text: #f3f4f8;
  --text-2: #a2a5b8;
  --text-3: #6b6f87;

  /* ---- Accent (space-separated RGB so alpha can be applied: rgb(var(--accent-rgb) / .4)) ---- */
  --accent-rgb: 255 90 31;
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgb(var(--accent-rgb) / 0.12);
  --accent-mid: rgb(var(--accent-rgb) / 0.35);
  --accent-glow: rgb(var(--accent-rgb) / 0.55);
  --on-accent: #07080e;

  /* ---- State ---- */
  --success: #2ee6a6;
  --success-soft: rgba(46, 230, 166, 0.12);
  --error: #ff5470;
  --error-soft: rgba(255, 84, 112, 0.1);
  --error-line: rgba(255, 84, 112, 0.35);

  /* ---- Hierarchy tiers ---- */
  --tier-founder: #ff4fa3;
  --tier-founder-soft: rgba(255, 79, 163, 0.14);
  --tier-coordinator: #5cb4ff;
  --tier-coordinator-soft: rgba(92, 180, 255, 0.14);
  --tier-management: #ffc247;
  --tier-management-soft: rgba(255, 194, 71, 0.14);
  --tier-department: #3df5a0;
  --tier-department-soft: rgba(61, 245, 160, 0.13);
  --tier-moderator: #ff6b6b;
  --tier-moderator-soft: rgba(255, 107, 107, 0.14);
  --tier-leads: #c58cff;
  --tier-leads-soft: rgba(197, 140, 255, 0.14);
  --tier-members: #9db4ff;
  --tier-members-soft: rgba(157, 180, 255, 0.12);
  --tier-external: #ff9b4a;
  --tier-external-soft: rgba(255, 155, 74, 0.14);

  /* ---- Typography ---- */
  --font-display: "Doto", "Courier New", ui-monospace, monospace;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari",
    "Noto Sans Bengali", "Nirmala UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-label: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-h2: clamp(2rem, 4.6vw, 3.4rem);
  --fs-hero: clamp(3.4rem, 12.5vw, 10rem);

  --lh-body: 1.65;
  --lh-tight: 0.95;
  --tracking-label: 0.16em;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* ---- Layout ---- */
  --max-width: 1240px;
  --max-width-prose: 760px;
  --max-width-narrow: 620px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-height: 72px;

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 340ms;
  --dur-slow: 700ms;

  /* ---- Depth & glow (polish layer) ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 42px rgba(2, 3, 8, 0.45);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 34px rgb(var(--accent-rgb) / 0.16);
  --glow-accent-2: 0 10px 44px rgb(var(--accent-rgb) / 0.3);
  --panel-grad: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.018));
  --panel-grad-2: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.03));
}

/* HUD corner-tick composition (shared by teal panels like .next-event / .cta-banner).
   8 hairline gradients = one bracket per corner, drawn inside the rounded edge. */
:root {
  --tick-c: var(--line-3);
  --hud-img:
    linear-gradient(var(--tick-c) 0 0), linear-gradient(var(--tick-c) 0 0),
    linear-gradient(var(--tick-c) 0 0), linear-gradient(var(--tick-c) 0 0),
    linear-gradient(var(--tick-c) 0 0), linear-gradient(var(--tick-c) 0 0),
    linear-gradient(var(--tick-c) 0 0), linear-gradient(var(--tick-c) 0 0);
  --hud-pos:
    10px 10px, calc(100% - 10px) 10px, 10px 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
    10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  --hud-size:
    16px 1.5px, 16px 1.5px, 1.5px 16px, 1.5px 16px,
    16px 1.5px, 16px 1.5px, 1.5px 16px, 1.5px 16px;
}

/* Accent palette — toggled from Settings → Accent colour */
html[data-accent="violet"] {
  --accent-rgb: 139 92 246;
}

html[data-accent="teal"] {
  --accent-rgb: 0 230 200;
}

html[data-accent="pink"] {
  --accent-rgb: 255 47 146;
}