/* ==========================================================================
   PCIU BUSINESS CLUB — DESIGN TOKENS
   Monochrome charcoal/slate/white system with a single professional-blue
   accent. Values are exposed as CSS custom properties so every component
   reads from one source of truth. Do not hardcode colors elsewhere.
   ========================================================================== */

:root {
  /* ---- Brand palette (raw values, theme-independent) ---- */
  --pciu-charcoal-900: #14171b;
  --pciu-charcoal-800: #1b1f24;
  --pciu-charcoal-700: #262b31;
  --pciu-slate-600: #4b5768;
  --pciu-slate-500: #647186;
  --pciu-slate-400: #8996a6;
  --pciu-slate-300: #b7c0cc;
  --pciu-slate-200: #dde2e8;
  --pciu-slate-100: #eef1f4;
  --pciu-white: #ffffff;
  --pciu-blue-700: #163b73;
  --pciu-blue-600: #1e4b8f;
  --pciu-blue-500: #2e5aac;
  --pciu-blue-400: #4d78cc;
  --pciu-blue-100: #e7edf8;
  --pciu-gold-500: #a9863b; /* reserved: honours / hall of fame accents only */
  --pciu-red-500: #b3352b;  /* reserved: destructive / error states only */
  --pciu-green-500: #2f7a4f; /* reserved: success / verified states only */

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --fs-sm: clamp(0.9rem, 0.88rem + 0.15vw, 0.98rem);
  --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
  --fs-lg: clamp(1.4rem, 1.3rem + 0.5vw, 1.7rem);
  --fs-xl: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --fs-2xl: clamp(2.3rem, 1.9rem + 2vw, 3.4rem);
  --fs-3xl: clamp(2.8rem, 2.2rem + 3vw, 4.6rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radii & elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 1px 2px rgba(20, 23, 27, 0.06), 0 1px 1px rgba(20, 23, 27, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(20, 23, 27, 0.18), 0 2px 6px rgba(20, 23, 27, 0.06);
  --shadow-lg: 0 20px 45px -18px rgba(20, 23, 27, 0.3), 0 6px 16px -6px rgba(20, 23, 27, 0.12);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 76px;
}

/* ==========================================================================
   THEME: LIGHT (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  --color-bg: var(--pciu-white);
  --color-bg-elevated: var(--pciu-white);
  --color-surface: var(--pciu-slate-100);
  --color-surface-alt: #f2f4f7;
  --color-border: var(--pciu-slate-200);
  --color-border-strong: var(--pciu-slate-300);

  --color-text: var(--pciu-charcoal-800);
  --color-text-muted: var(--pciu-slate-600);
  --color-text-subtle: var(--pciu-slate-500);
  --color-text-on-accent: var(--pciu-white);
  --color-text-on-dark: var(--pciu-white);

  --color-accent: var(--pciu-blue-600);
  --color-accent-hover: var(--pciu-blue-700);
  --color-accent-soft: var(--pciu-blue-100);

  --color-header-bg: rgba(255, 255, 255, 0.86);
  --color-footer-bg: var(--pciu-charcoal-800);
  --color-footer-text: var(--pciu-slate-200);

  --color-focus-ring: var(--pciu-blue-500);
  --scrollbar-track: var(--pciu-slate-100);
}

/* ==========================================================================
   THEME: DARK
   ========================================================================== */
[data-theme="dark"] {
  --color-bg: var(--pciu-charcoal-900);
  --color-bg-elevated: var(--pciu-charcoal-800);
  --color-surface: var(--pciu-charcoal-700);
  --color-surface-alt: #20252c;
  --color-border: #2c333c;
  --color-border-strong: #394252;

  --color-text: #f2f4f7;
  --color-text-muted: var(--pciu-slate-300);
  --color-text-subtle: var(--pciu-slate-400);
  --color-text-on-accent: var(--pciu-white);
  --color-text-on-dark: var(--pciu-white);

  --color-accent: var(--pciu-blue-400);
  --color-accent-hover: #6a91d8;
  --color-accent-soft: #1c2c47;

  --color-header-bg: rgba(20, 23, 27, 0.86);
  --color-footer-bg: #0f1215;
  --color-footer-text: var(--pciu-slate-300);

  --color-focus-ring: var(--pciu-blue-400);
  --scrollbar-track: var(--pciu-charcoal-700);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}