/* ========================================
   L'ÉCRIN DE LA ROCHE — Base
   Fonts, variables, reset
   ======================================== */

@font-face {
  font-family: 'Batica Sans';
  src: url('../fonts/BaticaSans-Regular.woff2') format('woff2'),
       url('../fonts/BaticaSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Batica Sans';
  src: url('../fonts/BaticaSans-Italic.woff2') format('woff2'),
       url('../fonts/BaticaSans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette */
  --color-green: #233126;
  --color-green-dark: #1a2620;
  --color-green-light: #2d3f30;
  --color-black: #000000;
  --color-cream: #F2EFEB;
  --color-cream-dim: #e8e4dd;
  --color-burgundy: #4B0E16;
  --color-burgundy-light: #6a1821;
  --color-white: #ffffff;

  /* Semantic */
  --bg-primary: var(--color-green);
  --bg-secondary: var(--color-green-dark);
  --text-primary: var(--color-cream);
  --text-muted: rgba(242, 239, 235, 0.55);
  --text-subtle: rgba(242, 239, 235, 0.35);
  --accent: var(--color-burgundy);
  --border-subtle: rgba(242, 239, 235, 0.12);
  --border-strong: rgba(242, 239, 235, 0.25);

  /* Typography */
  --font-sans: 'Batica Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The HTML `hidden` attribute must always win over display rules */
[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--color-burgundy);
  color: var(--color-cream);
}