/* ============================================================
   Gochu  Colors & Typography
   "The Velvet Chamber"  dark, warm, intimate
   ============================================================ */

/* --- Outfit (display + body) -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
/* --- Pacifico (logo wordmark only, per frontend globals.css) - */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  --gochu-hot-blush: #FF0080;
  /* gradient start */
  --gochu-deep-iris: #7928CA;
  /* gradient end */
  --gochu-soft-blush: #EC4899;
  /* tertiary */
  --gochu-pink-400: #f472b6;
  /* chip-active text */
  --gochu-ring-pink: hsl(322 81% 43%);
  /* solid focus ring */

  /* ===== NEUTRAL SURFACES ===== */
  --gochu-void: #050505;
  /* page background */
  --gochu-onyx: #0A0A0A;
  /* card surface */
  --gochu-charcoal: #1C1C1E;
  /* container / chip */
  --gochu-iron: #262626;
  /* disabled surface */
  --gochu-ghost-border: #1F1F1F;
  /* structural border */

  /* ===== TEXT ===== */
  --gochu-lunar: #F9F9F9;
  /* primary text */
  --gochu-ash: #A3A3A3;
  /* secondary text */
  --gochu-mute: #555555;
  /* placeholder fallback */

  /* ===== SEMANTIC FG / BG ===== */
  --bg: var(--gochu-void);
  --bg-card: var(--gochu-onyx);
  --bg-chip: var(--gochu-charcoal);
  --fg1: var(--gochu-lunar);
  --fg2: var(--gochu-ash);
  --border: var(--gochu-ghost-border);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* ===== SIGNATURE GRADIENTS ===== */
  --gochu-gradient: linear-gradient(135deg, #FF0080 0%, #7928CA 100%);
  --gochu-gradient-soft: linear-gradient(135deg, rgba(255, 0, 128, 0.9), rgba(121, 40, 202, 0.9));

  /* Atmospheric body warmth (single signature radial) */
  --gochu-atmosphere:
    radial-gradient(circle at 50% 0%, rgba(107, 70, 193, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 0% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);

  /* ===== GLOWS (interaction-only) ===== */
  --shadow-accent-glow: 0 0 20px rgba(255, 0, 128, 0.30);
  --shadow-iris-glow: 0 0 20px rgba(107, 70, 193, 0.30);
  --shadow-iris-large: 0 0 40px rgba(107, 70, 193, 0.40);
  --shadow-iris-whisper: 0 0 30px -5px rgba(120, 40, 200, 0.15);

  /* ===== RADII ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  /* inputs, ghost btn */
  --radius-lg: 12px;
  /* sidebar nav-item active */
  --radius-2xl: 16px;
  /* cards */
  --radius-full: 9999px;
  /* pills, primary CTA */

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 200ms;
  --dur-standard: 300ms;
  --dur-slow: 500ms;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Pacifico', cursive;
  /* logo wordmark only */

  /* type scale (px-equivalent) */
  --fs-display: clamp(2.25rem, 6vw, 4.5rem);
  /* 36–72 */
  --fs-h1: 1.875rem;
  /* 30 */
  --fs-h2: 1.5rem;
  /* 24 */
  --fs-h3: 1.125rem;
  /* 18 */
  --fs-body: 1rem;
  /* 16 */
  --fs-label: 0.8125rem;
  /* 13 */
  --fs-caption: 0.75rem;
  /* 12 */

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* tracking */
  --track-display: -0.02em;
  --track-h1: -0.015em;
  --track-label: 0.01em;

  /* line-heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-base: 1.35;
  --lh-loose: 1.65;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
.gochu-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

.gochu-h1,
h1.gochu {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h1);
  color: var(--fg1);
}

.gochu-h2,
h2.gochu {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.gochu-h3,
.gochu-title,
h3.gochu {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-base);
  color: var(--fg1);
}

.gochu-body,
p.gochu {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--fg1);
  max-width: 70ch;
}

.gochu-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--track-label);
  color: var(--fg2);
}

.gochu-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--fg2);
}

.gochu-emphasis {
  font-weight: var(--fw-medium);
  color: var(--fg1);
}

.gochu-wordmark {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}