/* taniecweb.pl — Design tokens — Latin Editorial */

:root {
  /* === BRAND === */
  --brand-primary: #7a1f2b; /* Tinto Burdeos */
  --brand-primary-hover: #5a161f;
  --brand-secondary: #c8a35e; /* Latón Dorado */
  --accent: #ff4d2e; /* Llama */
  --accent-hover: #e63d1f;

  /* === NEUTRALS LIGHT === */
  --n-0: #fbf8f3;
  --n-50: #f4efe6;
  --n-100: #e8e1d2;
  --n-200: #d4c9b3;
  --n-300: #a89c82;
  --n-400: #6f6450;
  --n-500: #4a4233;
  --n-700: #2a2418;
  --n-900: #13110a;

  /* === SEMANTIC === */
  --success: #3f7d4e;
  --warning: #c8851f;
  --error: #b33422;
  --info: #3a6b8c;

  /* === GENRE ACCENTS === */
  --g-salsa: #e8344b;
  --g-bachata: #d14b7a;
  --g-cha-cha: #f2722c;
  --g-samba: #1aab8b;
  --g-kizomba: #5e3a8a;
  --g-tango-argentynskie: #1a1c2e;
  --g-walc-wiedenski: #1f4368;
  --g-walc-angielski: #7a8fa3;
  --g-jive: #e8b82e;
  --g-hip-hop: #00d4ff;

  /* === TYPOGRAPHY === */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --t-xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --t-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --t-3xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --t-display: clamp(3rem, 2rem + 5vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.02em;

  /* === SPACING (4px base) === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* === LAYOUT === */
  --container-xs: 480px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;

  /* === RADIUS === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(19, 17, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(19, 17, 10, 0.08);
  --shadow-lg: 0 12px 32px rgba(19, 17, 10, 0.12);
  --shadow-burdeos: 0 12px 32px rgba(122, 31, 43, 0.18);

  /* === MOTION === */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 600ms;
}

[data-theme="dark"] {
  --n-0: #0f0d08;
  --n-50: #1a1610;
  --n-100: #26211a;
  --n-200: #3a3429;
  --n-300: #5c5343;
  --n-400: #8a7e68;
  --n-500: #b5a88e;
  --n-700: #e8dfc9;
  --n-900: #fbf8f3;

  --brand-primary: #e55b6b;
  --brand-primary-hover: #f37687;
  --brand-secondary: #d4b47a;
  --accent: #ff6f4d;
  --accent-hover: #ff8f6f;

  --success: #6fb37e;
  --warning: #e5a53f;
  --error: #e5614d;
  --info: #6a9dbf;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-burdeos: 0 12px 32px rgba(229, 91, 107, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}