/* ════════════════════════════════════════════════════════════════
   HUMBOLO TIME — Colors & Type Foundation
   Source of truth for brand colors, typography, semantic tokens.
   ════════════════════════════════════════════════════════════════ */

/* Local Outfit variable font — served from /fonts/. Outfit is the primary brand sans. */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
       url('/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Serif still loaded from Google — no local file provided yet */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ── BRAND COLORS ─────────────────────────────────────────── */
  /* Deep nocturnal background — base canvas */
  --ink-900: #06030f;       /* primary background, near-black with violet undertone */
  --ink-850: #0a0508;       /* "cabinet" panels — slightly warmer */
  --ink-800: #0c0816;       /* card surfaces */
  --ink-700: #150a10;       /* gradient counterpart */
  --ink-600: #1a1428;       /* elevated surface */

  /* Gold — the signature accent. Royalty, oracle, exception. */
  --gold-500: #d4af37;      /* primary gold */
  --gold-400: #ffd700;      /* bright gold (CTAs, glow) */
  --gold-300: #fff8e7;      /* highlight in shimmer */
  --gold-600: #b8962e;      /* CTA gradient end */
  --gold-700: #8a6f1f;      /* dimmed gold for borders */

  /* Pink — the secondary accent. Heat, label, "deal-breaker". */
  --pink-500: #ff2a6d;      /* primary pink */
  --pink-400: #ff8c00;      /* warm gradient counterpart (orange) */

  /* Parchment / cabinet text (used on serif blocks) */
  --parchment: rgba(240, 233, 221, 0.96);
  --parchment-muted: rgba(240, 233, 221, 0.7);
  --parchment-dim: rgba(163, 154, 138, 0.55);

  /* Neutrals on dark */
  --fg-1: #f8f8f8;          /* primary text */
  --fg-2: rgba(240, 240, 240, 0.92);
  --fg-3: rgba(240, 240, 240, 0.65);  /* body */
  --fg-4: #a0a0a0;          /* muted */
  --fg-5: rgba(255, 255, 255, 0.45);
  --fg-6: rgba(255, 255, 255, 0.25);  /* very dim */

  /* Glass / surfaces */
  --glass-bg:     rgba(255, 255, 255, 0.02);
  --glass-bg-2:   rgba(255, 255, 255, 0.04);
  --glass-bg-3:   rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
  --glass-border-strong: rgba(255, 255, 255, 0.18);

  /* Gold-tinted surfaces */
  --gold-tint-08: rgba(212, 175, 55, 0.08);
  --gold-tint-15: rgba(212, 175, 55, 0.15);
  --gold-tint-25: rgba(212, 175, 55, 0.25);
  --gold-tint-35: rgba(212, 175, 55, 0.35);

  /* Pink-tinted surfaces */
  --pink-tint-10: rgba(255, 42, 109, 0.10);
  --pink-tint-20: rgba(255, 42, 109, 0.20);
  --pink-tint-35: rgba(255, 42, 109, 0.35);

  /* ── TYPE SCALE ───────────────────────────────────────────── */
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-serif: 'Noto Serif', 'EB Garamond', Georgia, serif;
  --font-icon: 'Material Symbols Outlined';

  /* Display / hero */
  --type-display:   clamp(2.4rem, 10vw, 4.5rem);  /* hero glow-text */
  --type-h1:        clamp(2rem, 4.5vw, 3rem);
  --type-h2-serif:  clamp(2.2rem, 5.5vw, 3.4rem); /* "La Vérité" oracle title */
  --type-h2:        clamp(1.5rem, 6vw, 2.5rem);
  --type-h3:        1.35rem;
  --type-h4:        1.2rem;
  --type-body:      0.97rem;
  --type-body-sm:   0.875rem;
  --type-meta:      0.75rem;
  --type-eyebrow:   0.62rem;     /* uppercase labels with letter-spacing */
  --type-tiny:      0.65rem;

  /* Letter-spacing for the famous eyebrow style */
  --tracking-eyebrow: 0.18em;
  --tracking-luxe:    0.3em;     /* "SOLLICITER L'ORACLE" */
  --tracking-wide:    0.5em;     /* "Cabinet de l'Oracle" */
  --tracking-tight:   -0.02em;
  --tracking-display: -0.04em;

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-heavy:   800;
  --weight-black:   900;

  /* ── SPACING ──────────────────────────────────────────────── */
  --space-0: 0;
  --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;

  /* ── RADII ────────────────────────────────────────────────── */
  --radius-sm: 6px;          /* nav links */
  --radius-md: 10px;          /* dropdowns */
  --radius-lg: 14px;
  --radius-xl: 20px;          /* cards */
  --radius-2xl: 22px;         /* premium panels */
  --radius-3xl: 24px;
  --radius-pill: 50px;        /* buttons, badges */

  /* ── SHADOWS / GLOWS ──────────────────────────────────────── */
  --shadow-card:        0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-card-strong: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212,175,55,0.06);
  --shadow-pop:         0 20px 40px rgba(0, 0, 0, 0.4);

  --glow-gold-soft:   0 0 12px rgba(212, 175, 55, 0.25);
  --glow-gold:        0 0 16px rgba(212, 175, 55, 0.40);
  --glow-gold-strong: 0 0 28px rgba(212, 175, 55, 0.45);
  --glow-gold-mega:   0 0 30px rgba(212, 175, 55, 0.6), 0 0 60px rgba(255, 42, 109, 0.2);
  --glow-pink:        0 0 12px rgba(255, 42, 109, 0.20);
  --glow-text-gold:   0 0 40px rgba(212, 175, 55, 0.6), 0 0 80px rgba(212, 175, 55, 0.25);

  /* ── EFFECTS ──────────────────────────────────────────────── */
  --blur-glass: blur(16px);
  --blur-glass-strong: blur(40px);

  /* ── GRADIENTS ────────────────────────────────────────────── */
  --grad-gold:        linear-gradient(135deg, #d4af37, #ffd700);
  --grad-gold-warm:   linear-gradient(135deg, #d4af37, #ff8c00);
  --grad-gold-pink:   linear-gradient(135deg, #d4af37, #ff2a6d);
  --grad-cta:         linear-gradient(45deg, var(--gold-500), var(--gold-400));
  --grad-text-hero:   linear-gradient(135deg, #fff 0%, #d4af37 100%);
  --grad-shimmer:     linear-gradient(90deg,#d4af37 0%,#fff8e7 40%,#d4af37 60%,#d4af37 100%);
  --grad-cabinet:     radial-gradient(ellipse at top, rgba(212,175,55,.06), transparent 70%),
                      linear-gradient(180deg, #0a0508 0%, #150a10 100%);

  /* ── EASING ───────────────────────────────────────────────── */
  --ease-brut:    cubic-bezier(0.22, 0.68, 0, 1.4);   /* signature bouncy reveal */
  --ease-smooth:  cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════
   SEMANTIC ELEMENT STYLES
   ════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  background: var(--ink-900);
  color: var(--fg-1);
  font-weight: var(--weight-regular);
  line-height: 1.6;
}

/* H1 — page titles, "À propos" pages */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--type-h1);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--fg-1);
}

/* Hero glow — the signature gradient text */
.h-display, .glow-text {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: var(--weight-heavy);
  line-height: 1.1;
  background: var(--grad-text-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}

/* H2 sans (section titles) */
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* H2 serif italic — the Cabinet de l'Oracle voice */
.h2-serif, .h-cabinet {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--type-h2-serif);
  line-height: 1.1;
  color: var(--parchment);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

/* Body text on dark */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  color: var(--fg-3);
  line-height: 1.85;
}

.body-sm {
  font-size: var(--type-body-sm);
  color: var(--fg-3);
  line-height: 1.7;
}

/* Serif italic body — used in oracle CTA blocks */
.body-cabinet {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--parchment-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Eyebrow — the most-used label style on the site */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
}

.eyebrow-pink { color: var(--pink-500); }
.eyebrow-luxe { letter-spacing: var(--tracking-luxe); }
.eyebrow-wide { letter-spacing: var(--tracking-wide); color: rgba(212,175,55,0.55); }

/* Stat / number — large gradient figure */
.stat-num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  background: var(--grad-gold-pink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-num-xl {
  font-size: 3rem;
  background: var(--grad-gold-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Code / mono — used sparingly in technical FAQ blocks */
code, .mono {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--glass-bg-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--gold-500);
}

strong { color: var(--fg-2); font-weight: var(--weight-bold); }

a {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}
a:hover { opacity: 0.8; }