/* Studika v2 — shared design tokens
 * Base palette is cream-first marketplace-editorial.
 * Each variation overrides accent + mood tokens in its own theme.css.
 */

:root {
  /* Base neutrals — shared across all variations */
  --cream-0: #FBF7F0;
  --cream-1: #F4ECDD;
  --cream-2: #E8DCC4;
  --ink-0: #0E0B08;
  --ink-1: #1C1813;
  --ink-2: #2A241C;
  --ink-3: #4A3F30;
  --ink-4: #7A6B55;

  /* Type scale — Playfair / DM Sans / Space Mono */
  --ff-display: 'Playfair Display', 'GT Sectra', Georgia, serif;
  --ff-sans: 'DM Sans', 'Inter', system-ui, sans-serif;
  --ff-mono: 'Space Mono', 'JetBrains Mono', monospace;

  --fs-kicker: clamp(11px, 0.72vw, 13px);
  --fs-body-sm: clamp(13px, 0.9vw, 15px);
  --fs-body: clamp(15px, 1.1vw, 17px);
  --fs-body-lg: clamp(17px, 1.25vw, 19px);
  --fs-h3: clamp(22px, 2vw, 32px);
  --fs-h2: clamp(32px, 3.6vw, 56px);
  --fs-h1: clamp(48px, 7vw, 112px);
  --fs-display: clamp(72px, 10vw, 180px);

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* Radii — small and tight, editorial not rounded-toy */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion — Apple-ish ease */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.64, 0, 0.34, 1);
  --d-micro: 180ms;
  --d-primary: 340ms;
  --d-slow: 560ms;
  --d-stagger: 52ms;

  /* Shadow — soft editorial, never floaty-SaaS */
  --sh-1: 0 1px 2px rgba(14, 11, 8, 0.04), 0 2px 6px rgba(14, 11, 8, 0.04);
  --sh-2: 0 2px 8px rgba(14, 11, 8, 0.06), 0 12px 32px rgba(14, 11, 8, 0.08);
  --sh-3: 0 8px 24px rgba(14, 11, 8, 0.08), 0 32px 64px rgba(14, 11, 8, 0.12);

  /* Grain & texture */
  --grain-opacity: 0.035;
  --noise-opacity: 0.06;
}

/* Reset — tight, no bloat */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--cream-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, canvas { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Typography primitives */
.t-kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.t-h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.t-h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.t-h3 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--ink-2); }
.t-body { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.t-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.t-italic { font-style: italic; }

/* Utility */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--sp-8); }
}
@media (min-width: 1200px) {
  .container { padding: 0 var(--sp-9); }
}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}