/* ===== Capptura — Design System Tokens =====
   Sursă: design_handoff_capptura/design-tokens.css. Sincronizat 1:1.
   Brand: lenjerie & costume de baie premium.
*/

@font-face {
  font-family: "Alta-Local";
  src: local("Alta"), local("Alta Regular");
  font-display: swap;
}

:root {
  /* Type */
  --font-display: "Alta-Local", "Alta", "Italiana", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-ui:      "Alta-Local", "Alta", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Outfit", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Surfaces */
  --bg:        oklch(0.975 0.006 60);
  --bg-2:      oklch(0.945 0.008 55);
  --bg-3:      oklch(0.91 0.012 50);
  --bg-ink:    oklch(0.18 0.012 30);
  --bg-ink-2:  oklch(0.22 0.012 30);

  --line:      oklch(0.86 0.010 50);
  --line-soft: oklch(0.91 0.010 50);
  --line-ink:  oklch(0.30 0.014 30);

  --fg:        oklch(0.18 0.012 30);
  --fg-2:      oklch(0.36 0.014 30);
  --fg-mute:   oklch(0.55 0.012 35);
  --fg-inv:    oklch(0.97 0.006 60);

  /* Accents */
  --accent:      oklch(0.42 0.09 15);
  --accent-2:    oklch(0.62 0.07 22);
  --accent-soft: oklch(0.88 0.025 22);
  --accent-gold: oklch(0.72 0.07 80);

  /* Radii / shadows */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(33,18,12,0.06);
  --shadow-md: 0 18px 50px rgba(33,18,12,0.12);

  /* Spacing scale (multipli de 4px) */
  --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-14:  56px;
  --s-15:  60px;
  --s-20:  80px;
  --s-25:  100px;
  --s-30:  120px;
  --s-35:  140px;

  /* Layout */
  --container-max: 1440px;
  --container-pad-d: 56px;
  --container-pad-m: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   220ms;
  --t-mid:    320ms;
  --t-slow:   450ms;
  --t-page:   280ms;
  --t-drawer: 380ms;
  --t-reveal: 800ms;
}

.theme-dark {
  --bg:        oklch(0.16 0.012 30);
  --bg-2:      oklch(0.20 0.012 30);
  --bg-3:      oklch(0.26 0.012 30);
  --line:      oklch(0.30 0.012 30);
  --line-soft: oklch(0.24 0.012 30);
  --fg:        oklch(0.96 0.006 60);
  --fg-2:      oklch(0.80 0.010 50);
  --fg-mute:   oklch(0.58 0.012 50);
  --fg-inv:    oklch(0.18 0.012 30);
  --accent:    oklch(0.78 0.08 22);
  --accent-2:  oklch(0.66 0.08 22);
  --accent-soft: oklch(0.34 0.04 22);
}

/* Base */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; }

* { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }