/* Putri Labs Design System — Core Tokens
 * ─────────────────────────────────────────
 * Four coexisting brand systems:
 *   1. Putri Labs (parent)   — editorial dark studio
 *   2. VacayStack            — warm hospitality
 *   3. CustomsPro            — indigo SaaS, glassmorphic
 *   4. Gym AI                — high-contrast black + acid lime
 * ───────────────────────────────────────── */

/* ── FONTS ───────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  src: url("./fonts/GeistVF.woff") format("woff-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMonoVF.woff") format("woff-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* Google Font fallbacks — flagged for user.
 *  • Cormorant Garamond / Fraunces — VacayStack serif display
 *  • Outfit — VacayStack sans body (used in stargazing codebase)
 *  • Instrument Serif — editorial accent
 *  • Space Grotesk — geometric display (Gym AI headings in mocks)
 *  • Inter — CustomsPro body (actual codebase font)
 *  • JetBrains Mono — mono/tabular fallback
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ─── PUTRI LABS (parent brand) ─── */
  --pl-bg: #0a0a0a;
  --pl-bg-elev: #0d0d0d;
  --pl-surface: #111111;
  --pl-border: #1a1a1a;
  --pl-border-2: #222222;
  --pl-fg: #ffffff;
  --pl-fg-muted: #888888;
  --pl-fg-dim: #555555;
  --pl-fg-faint: #333333;
  --pl-accent: #c8ff00; /* shared w/ Gym AI — studio signature */
  --pl-accent-hi: #d4ff1a;

  /* ─── VACAYSTACK (hospitality) ─── */
  --vs-bg: #faf7f2; /* cream */
  --vs-bg-2: #f2ece1; /* sand */
  --vs-surface: #ffffff;
  --vs-border: #e8e0d2;
  --vs-fg: #1f1b16; /* deep espresso */
  --vs-fg-muted: #6b5e4f;
  --vs-fg-dim: #9a8e7e;
  --vs-accent: #b5643c; /* terracotta */
  --vs-accent-2: #5c6b4a; /* deep olive */
  --vs-gold: #f2b57a; /* sand/gold from stargazing */
  --vs-ink: #0b0b0b; /* night mode for client hero */

  /* ─── CUSTOMSPRO (serious SaaS) ─── */
  --cp-bg: #fafafa;
  --cp-surface: #ffffff;
  --cp-border: #e5e7eb; /* gray-200 */
  --cp-border-2: #d1d5db;
  --cp-fg: #111827; /* gray-900 */
  --cp-fg-muted: #6b7280; /* gray-500 */
  --cp-fg-dim: #9ca3af;
  --cp-primary: #4f46e5; /* indigo-600 */
  --cp-primary-2: #3730a3; /* indigo-900 */
  --cp-accent-1: #a855f7; /* purple */
  --cp-accent-2: #ec4899; /* pink */
  --cp-success: #10b981;
  --cp-warn: #f59e0b;
  --cp-danger: #f43f5e;

  /* ─── GYM AI (energetic) ─── */
  --ga-bg: #0a0a0a;
  --ga-bg-elev: #0d0d0d;
  --ga-surface: #111111;
  --ga-border: #1a1a1a;
  --ga-border-2: #222222;
  --ga-fg: #ffffff;
  --ga-fg-muted: #888888;
  --ga-fg-dim: #555555;
  --ga-acid: #c8ff00; /* signature lime */
  --ga-acid-hi: #d4ff1a;

  /* ─── SHARED SEMANTIC ─── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 40px rgba(79, 70, 229, 0.1);
  --shadow-glow-indigo: 0 8px 30px rgba(79, 70, 229, 0.3);
  --shadow-glow-acid: 0 0 20px rgba(200, 255, 0, 0.35);

  /* Typography — families */
  --font-display-pl:
    "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body-pl: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono-pl: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --font-display-vs: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body-vs: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-accent-vs: "Instrument Serif", Georgia, serif;

  --font-display-cp: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body-cp: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono-cp: "JetBrains Mono", ui-monospace, monospace;

  --font-display-ga:
    "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body-ga: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono-ga: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (desktop) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-7xl: 80px;
  --text-8xl: 108px;

  /* Tracking */
  --tracking-tightest: -0.04em;
  --tracking-tighter: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.3em;
}

/* ── SEMANTIC TYPE PRIMITIVES ──────────────────────
 *  Reusable utility classes. Pair with a brand-scoped
 *  wrapper (.brand-pl, .brand-vs, .brand-cp, .brand-ga)
 *  to apply the right family + colors automatically.
 * ────────────────────────────────────────────────── */

.display-xl {
  font-size: clamp(56px, 8vw, 108px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  font-weight: 900;
}
.display-lg {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}
.display-md {
  font-size: clamp(32px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}
.h1 {
  font-size: var(--text-5xl);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}
.h2 {
  font-size: var(--text-4xl);
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
  font-weight: 700;
}
.h3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.h4 {
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: 700;
}
.body-lg {
  font-size: var(--text-lg);
  line-height: 1.55;
  font-weight: 500;
}
.body {
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
}
.body-sm {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: 400;
}
.caption {
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 500;
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.mono-sm {
  font-family: var(--font-mono-pl);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}

/* ── BRAND SCOPES ────────────────────────────────── */

.brand-pl {
  background: var(--pl-bg);
  color: var(--pl-fg);
  font-family: var(--font-body-pl);
}
.brand-pl .display-xl,
.brand-pl .display-lg,
.brand-pl .display-md,
.brand-pl .h1,
.brand-pl .h2,
.brand-pl .h3 {
  font-family: var(--font-display-pl);
  text-transform: uppercase;
}

.brand-vs {
  background: var(--vs-bg);
  color: var(--vs-fg);
  font-family: var(--font-body-vs);
}
.brand-vs .display-xl,
.brand-vs .display-lg,
.brand-vs .display-md,
.brand-vs .h1,
.brand-vs .h2 {
  font-family: var(--font-display-vs);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

.brand-cp {
  background: var(--cp-bg);
  color: var(--cp-fg);
  font-family: var(--font-body-cp);
}
.brand-cp .display-xl,
.brand-cp .display-lg,
.brand-cp .display-md,
.brand-cp .h1,
.brand-cp .h2 {
  font-family: var(--font-display-cp);
  letter-spacing: var(--tracking-tighter);
}

.brand-ga {
  background: var(--ga-bg);
  color: var(--ga-fg);
  font-family: var(--font-body-ga);
}
.brand-ga .display-xl,
.brand-ga .display-lg,
.brand-ga .display-md,
.brand-ga .h1,
.brand-ga .h2,
.brand-ga .h3 {
  font-family: var(--font-display-ga);
  text-transform: uppercase;
  font-weight: 900;
}

/* ── MOTION ──────────────────────────────────────── */
:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;
}