/* =========================================================
   MAVE CONSULTANTS — DESIGN TOKENS
   Palette: Black / White / Grey — premium, minimal, corporate
   Type: Sora (display) + Outfit (body)
   ========================================================= */

:root {
  /* ---- Color: brand (monochrome) ---- */
  --color-primary: #111111;
  --color-primary-light: #2A2A2A;
  --color-primary-dark: #000000;
  --color-secondary: #4A4A4A;
  --color-secondary-dark: #2F2F2F;
  --color-accent: #C9A227;         /* subtle muted gold, used sparingly */
  --color-accent-dark: #A9860F;

  /* ---- Color: neutrals ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F6F7;
  --color-card: #F2F2F3;
  --color-card-solid: #FFFFFF;
  --color-border: #E2E2E4;
  --color-text: #141414;
  --color-text-soft: #56585C;
  --color-text-faint: #8A8C90;
  --color-white: #FFFFFF;

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 55%, #5A5A5A 100%);
  --gradient-accent: linear-gradient(120deg, #4A4A4A 0%, #C9A227 100%);
  --gradient-hero: radial-gradient(120% 120% at 15% 10%, #2A2A2A 0%, #111111 45%, #000000 100%);
  --gradient-text: linear-gradient(100deg, #3A3A3A 0%, #111111 100%);

  /* ---- Typography ---- */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Outfit', sans-serif;

  --fs-h1: clamp(2.6rem, 5vw + 1rem, 4.6rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  --fs-body: 1rem;
  --fs-lg: 1.15rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Spacing ---- */
  --space-section: clamp(4.5rem, 8vw, 8rem);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --container-w: 1280px;

  /* ---- Radii & shadows ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 50px rgba(0, 0, 0, 0.16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Layers ---- */
  --z-cursor: 9999;
  --z-intro: 9000;
  --z-loader: 8500;
  --z-modal: 8000;
  --z-nav: 500;
}

/* ---- Dark mode ---- */
html[data-theme="dark"] {
  --color-bg: #0B0B0C;
  --color-bg-alt: #131314;
  --color-card: #18181A;
  --color-card-solid: #1C1C1E;
  --color-border: #2C2C2F;
  --color-text: #F5F5F6;
  --color-text-soft: #C6C7CA;
  --color-text-faint: #8A8C90;
  --color-white: #1C1C1E;
  --gradient-hero: radial-gradient(120% 120% at 15% 10%, #2A2A2A 0%, #0D0D0E 55%, #000000 100%);
}