/* ========================================
   100xGood Design System — Variables
   Updated: April 2026 (v10)
   Source: 100xgood-design-system/project
   ======================================== */

/* ===================
   SELF-HOSTED FONTS
   =================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('/assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/BarlowSemiCondensed-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('/assets/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

: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);
  --dark-surface: #1A1A24;
  --dark-subtle: #0F0F15;

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

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

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

  --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(--rose-quartz);
  --stat-5: var(--amethyst);

  /* 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', Calibri, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;

  /* Type scale */
  --fs-eyebrow: 0.68rem;
  --fs-mono-tag: 0.58rem;
  --fs-caption: 0.78rem;
  --fs-body: 1rem;
  --fs-lead: 1.1rem;
  --fs-h3: clamp(1.1rem, 1.8vw, 1.4rem);
  --fs-h2: clamp(1.4rem, 2.5vw, 2rem);
  --fs-h1: clamp(1.6rem, 3vw, 2.5rem);
  --fs-display: clamp(3rem, 7vw, 5.5rem);

  /* Letter spacing */
  --track-eyebrow: 0.12em;
  --track-mono: 0.08em;
  --track-display: -0.03em;
  --track-serif: -0.02em;

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

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 2.5rem;
  --space-section: clamp(3.5rem, 7vw, 5.5rem);

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

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

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

  /* ===================
     RADII & BORDERS
     =================== */

  --radius-sm: 2px;   /* buttons — intentionally sharp */
  --radius: 4px;      /* small cards, badges */
  --radius-md: 6px;   /* standard cards, panels */
  --radius-lg: 8px;   /* badges, avatars */
  --radius-full: 50%;
  --border-w: 1px;

  /* ===================
     SHADOWS
     =================== */

  --shadow-sm: 0 2px 10px rgba(20,20,28,0.06);
  --shadow: 0 4px 12px rgba(20,20,28,0.06);
  --shadow-md: 0 4px 16px rgba(20,20,28,0.07);
  --shadow-lg: 0 4px 20px rgba(20,20,28,0.08);
  --shadow-hero: 0 4px 20px rgba(95,80,157,0.20);

  /* ===================
     GRADIENTS
     =================== */

  /* Primary: ONLY gradient used on text (logo, hero headline line 2) */
  --grad-primary: linear-gradient(135deg, #31263B 0%, #A477B2 100%);
  --grad-dark: linear-gradient(135deg, #A477B2 0%, #F5C0C0 100%);
  --grad-progress: linear-gradient(135deg, #473982 0%, #A477B2 100%);
  --grad-data: linear-gradient(135deg, #5F509D 0%, #5CB198 100%);
  --grad-ramp: linear-gradient(135deg, #31263B 0%, #473982 33%, #A477B2 66%, #F5C0C0 100%);
  --grad-warm: linear-gradient(135deg, #5CB198 0%, #CDA849 100%);

  /* Radial glows */
  --glow-violet: radial-gradient(ellipse at center, rgba(95,80,157,0.25) 0%, transparent 60%);
  --glow-amethyst: radial-gradient(ellipse at center, rgba(164,119,178,0.20) 0%, transparent 60%);

  /* Harmony bar: six accent colors in this exact order */
  --harmony-1: #473982;
  --harmony-2: #5F509D;
  --harmony-3: #A477B2;
  --harmony-4: #F5C0C0;
  --harmony-5: #5CB198;
  --harmony-6: #CDA849;

  /* ===================
     TRANSITIONS
     =================== */

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

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

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