/* =========================================================
   Celestara Voyages — Design Tokens
   v1.0 — single source of truth for color, type, space, radius
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───── COLOR ─ Core palette (logo-derived) ──────────── */
  --c-deep-space:       #0D1B4B;   /* primary dark BG */
  --c-off-black:        #0A0A14;   /* full dark sections */
  --c-electric-violet:  #6B3FA0;   /* logo violet */
  --c-nebula-blue:      #2D6FD4;   /* logo blue */
  --c-cosmic-magenta:   #C7357A;   /* logo magenta */
  --c-icy-blue:         #B8D8F8;   /* glow / cryo */
  --c-soft-white:       #FAFAFA;   /* light surface */
  --c-silver-slate:     #8A95A8;   /* secondary text */

  /* Extended utility scale (oklch-derived neighbors) */
  --c-ink-900:          #050816;
  --c-ink-800:          #0A0A14;
  --c-ink-700:          #111634;
  --c-ink-600:          #1A2255;
  --c-ink-500:          #0D1B4B;
  --c-ink-400:          #2C3878;
  --c-ink-300:          #4A569A;
  --c-ink-200:          #8A95A8;
  --c-ink-100:          #C9D0DD;
  --c-ink-50:           #EDF0F6;
  --c-paper:            #FAFAFA;
  --c-paper-warm:       #F4F1EC;

  /* Semantic */
  --c-success:          #1B6B4A;   /* Eden-9 green */
  --c-warn:             #D9A23A;
  --c-danger:           #C7357A;
  --c-info:             #2D6FD4;

  /* Surfaces */
  --surf-canvas-dark:   var(--c-deep-space);
  --surf-canvas-darker: var(--c-off-black);
  --surf-card-dark:     #131C50;
  --surf-card-light:    #FFFFFF;
  --surf-stroke-dark:   rgba(184,216,248,0.14);
  --surf-stroke-light:  #E4E7EE;

  /* ───── GRADIENTS ───────────────────────────────────── */
  --grad-aurora-sweep:  linear-gradient(110deg, #6B3FA0 0%, #2D6FD4 100%);
  --grad-nova-flash:    linear-gradient(110deg, #C7357A 0%, #6B3FA0 100%);
  --grad-starfield:     linear-gradient(180deg, #0D1B4B 0%, #0A0A14 100%);
  --grad-oasis:         linear-gradient(110deg, #2D6FD4 0%, #1B6B4A 100%);
  --grad-iridescent:    linear-gradient(110deg, #C7357A 0%, #6B3FA0 38%, #2D6FD4 72%, #B8D8F8 100%);
  --grad-prism-soft:    linear-gradient(180deg, rgba(107,63,160,0.18) 0%, rgba(45,111,212,0.05) 100%);

  /* ───── TYPE ────────────────────────────────────────── */
  /* Display — condensed humanist sans, wide-tracked uppercase
     Fallback rationale: Oswald and Bebas Neue share Barlow's condensed proportions;
     Antonio is a tighter geometric variant; Roboto Condensed and Arial Narrow are
     the safest system-adjacent fallbacks; Impact is the universal floor. */
  --font-display: "Barlow Condensed", "Oswald", "Bebas Neue", "Antonio",
                  "Roboto Condensed", "Arial Narrow", Impact, sans-serif;

  /* Body — neutral geometric sans with editorial warmth
     Fallback rationale: Inter and Manrope share DM Sans's optical metrics and
     x-height; Public Sans is a near-clone; system-ui covers OS-native rendering;
     -apple-system / Segoe UI / Roboto cover macOS / Windows / Android. */
  --font-body:    "DM Sans", "Inter", "Manrope", "Public Sans", system-ui,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Mono — technical, slightly humanist for booking codes & specs
     Fallback rationale: Fira Code and IBM Plex Mono are visually closest to
     JetBrains Mono; ui-monospace maps to native OS mono; SF Mono / Menlo / Monaco
     on macOS, Consolas on Windows, Courier New as universal floor. */
  --font-mono:    "JetBrains Mono", "Fira Code", "IBM Plex Mono", ui-monospace,
                  "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Modular scale, base 16, ratio ~1.25 with display jumps */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-display: 0.06em;   /* wide for Barlow Condensed caps */
  --tracking-label:   0.18em;   /* eyebrows / class badges */
  --tracking-body:    0;

  /* ───── SPACING ─ 4-pt baseline ──────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ───── RADII ─ sharp / crystalline ──────────────────── */
  --r-0: 0px;
  --r-sm: 2px;
  --r-md: 4px;       /* default UI */
  --r-lg: 6px;       /* cards (max) */
  --r-pill: 999px;   /* pills only */

  /* ───── ELEVATION ─ glow over shadow ─────────────────── */
  --shadow-sm:   0 1px 2px rgba(5,8,22,0.10);
  --shadow-md:   0 6px 18px -4px rgba(5,8,22,0.18);
  --shadow-lg:   0 18px 40px -12px rgba(5,8,22,0.28);
  --glow-violet: 0 0 0 1px rgba(107,63,160,0.40), 0 0 24px -4px rgba(107,63,160,0.55);
  --glow-blue:   0 0 0 1px rgba(45,111,212,0.40),  0 0 24px -4px rgba(45,111,212,0.55);
  --glow-magenta:0 0 0 1px rgba(199,53,122,0.40), 0 0 24px -4px rgba(199,53,122,0.55);
  --glow-iri:    0 0 0 1px rgba(184,216,248,0.30), 0 8px 40px -8px rgba(107,63,160,0.45);

  /* ───── MOTION ──────────────────────────────────────── */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasis: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;
}

/* ───── BASE RESET (scoped to body) ─────────────────────── */
html { -webkit-text-size-adjust:100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ───── UTILITY HELPERS used across the system ─────────── */
.cv-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-silver-slate);
}
.cv-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.cv-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.cv-subhead {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.cv-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Iridescent text fill */
.cv-text-iri {
  background: var(--grad-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline iridescent rule */
.cv-rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(184,216,248,0.5) 18%, rgba(199,53,122,0.55) 50%, rgba(107,63,160,0.55) 82%, transparent 100%);
  border: 0;
}

/* Star micro-divider — repeating crystalline glyph */
.cv-rule-star {
  height: 14px;
  background-image: radial-gradient(circle, var(--c-icy-blue) 1px, transparent 1.6px);
  background-size: 14px 14px;
  background-position: center;
  opacity: 0.6;
}

/* ───── THEME WRAPPERS ─────────────────────────────────── */
.cv-theme-dark {
  background: var(--c-deep-space);
  color: var(--c-paper);
}
.cv-theme-darker {
  background: var(--c-off-black);
  color: var(--c-paper);
}
.cv-theme-light {
  background: var(--c-paper);
  color: var(--c-ink-500);
}