/* ========================================
   100xGood Design System — Variables
   Updated: April 2026
   ======================================== */

:root {
  /* ===================
     GEMSTONE PALETTE (12 colors)
     =================== */

  /* Neutrals */
  --black: #01011B;
  --obsidian: #14141C;
  --eggplant: #31263B;
  --cement: #717A94;
  --opal: #FBF9F9;
  --white: #FFFFFF;

  /* Accents */
  --minsk: #473982;
  --violet-topaz: #5F509D;
  --amethyst: #A477B2;
  --rose-quartz: #F5C0C0;
  --jade: #5CB198;
  --citrine: #CDA849;

  /* Deep stroke variants — use when Rose Quartz / Citrine need WCAG contrast on Opal */
  --rose-quartz-deep: #D4A0A0;
  --citrine-deep: #9A7A2E;

  /* ===================
     SECTOR COLOR MAPPING
     =================== */

  --sector-climate: var(--jade);
  --sector-health: var(--rose-quartz);
  --sector-health-stroke: var(--rose-quartz-deep);
  --sector-equity: var(--citrine);
  --sector-equity-stroke: var(--citrine-deep);
  --sector-govtech: var(--violet-topaz);
  --sector-nonprofit: var(--amethyst);

  /* ===================
     SEMANTIC TOKENS
     =================== */

  --bg-page: var(--opal);
  --bg-surface: #FFFFFF;
  --bg-subtle: #F0ECEC;
  --bg-dark: var(--obsidian);

  --text-default: var(--eggplant);
  --text-heading: var(--eggplant);
  --text-muted: var(--cement);
  --text-inverse: var(--white);

  --border: #E9E5E8;
  --border-strong: var(--eggplant);
  --border-dark: rgba(245, 192, 192, 0.15);

  --btn-primary-bg: var(--minsk);
  --btn-primary-text: var(--white);
  --btn-primary-hover: var(--citrine);
  --btn-outline-border: var(--minsk);
  --btn-outline-text: var(--minsk);

  --accent-primary: var(--amethyst);
  --accent-success: var(--jade);
  --accent-warning: var(--citrine);
  --accent-soft: var(--rose-quartz);

  /* Stat color rotation (used by .stat-color-1 through .stat-color-5) */
  --stat-1: var(--violet-topaz);
  --stat-2: var(--jade);
  --stat-3: var(--citrine);
  --stat-4: var(--amethyst);
  --stat-5: var(--rose-quartz);

  /* Feature card / gem icon color — overridable per card via inline style */
  --icon-color: var(--amethyst);

  /* ===================
     TYPOGRAPHY
     =================== */

  --font-display-serif: 'Playfair Display', Georgia, serif;
  --font-display-sans: 'Barlow Semi Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-ui: 'IBM Plex Sans', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  /* ===================
     SPACING
     =================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-padding: clamp(4rem, 10vw, 8rem);
  --section-padding-sm: clamp(3rem, 6vw, 5rem);

  /* ===================
     LAYOUT
     =================== */

  --container-max: 1060px;
  --container-wide: 1200px;
  --container-narrow: 800px;
  --page-margin: 24px;

  /* ===================
     EFFECTS
     =================== */

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 50%;

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ===================
   DARK MODE SUPPORT
   =================== */

[data-theme="dark"] {
  --bg-page: var(--obsidian);
  --bg-surface: #1A1A24;
  --bg-subtle: #0F0F15;
  --text-default: var(--rose-quartz);
  --text-heading: var(--white);
  --text-muted: #8A8599;
  --border: rgba(245, 192, 192, 0.15);
  --btn-primary-bg: var(--white);
  --btn-primary-text: var(--obsidian);
  --btn-primary-hover: var(--rose-quartz);
  --btn-outline-border: var(--rose-quartz);
  --btn-outline-text: var(--white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--obsidian);
    --bg-surface: #1A1A24;
    --bg-subtle: #0F0F15;
    --text-default: var(--rose-quartz);
    --text-heading: var(--white);
    --text-muted: #8A8599;
    --border: rgba(245, 192, 192, 0.15);
    --btn-primary-bg: var(--white);
    --btn-primary-text: var(--obsidian);
    --btn-primary-hover: var(--rose-quartz);
    --btn-outline-border: var(--rose-quartz);
    --btn-outline-text: var(--white);
  }
}