@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dancing Script";
  src: url("../assets/fonts/dancing-script.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paleta inspirada en el local: negro cálido, crema de las paredes, ámbar de las lámparas y madera */
  --color-bg: #141110;
  --color-bg-alt: #1b1715;
  --color-surface: #221d1a;
  --color-surface-raised: #2b2521;
  --color-line: rgb(243 233 215 / 0.12);
  --color-line-strong: rgb(243 233 215 / 0.24);
  --color-text: #f3e9d7;
  --color-text-muted: #c4b8a5;
  --color-accent: #e3a73f;
  --color-accent-strong: #f2bd5c;
  --color-accent-soft: rgb(227 167 63 / 0.14);
  --color-on-accent: #1a1208;
  --color-wood: #b8732f;
  --color-success: #8fd19e;
  --color-success-soft: rgb(143 209 158 / 0.14);
  --color-warning: #f2c14e;
  --color-danger: #ff8a75;
  --color-danger-soft: rgb(255 138 117 / 0.12);

  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", "Brush Script MT", cursive;

  --fs-300: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem);
  --fs-400: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --fs-500: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  --fs-600: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --fs-700: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
  --fs-800: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 5vw, 7.5rem);

  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.5rem;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 18px 40px -24px rgb(0 0 0 / 0.8);
  --shadow-glow: 0 0 0 1px rgb(227 167 63 / 0.35), 0 12px 40px -12px rgb(227 167 63 / 0.45);

  --container: 72rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --header-height: 4.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 800ms;

  --z-header: 50;
  --z-nav: 60;
  --z-skip: 100;
}