/* ============================================
   BASE.CSS — Reset, Variables, Typographie
   glace.ladegustation.guide
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;700&display=swap");

/* --- Variables --- */
:root {
  /* Couleurs Neo-Brutalism */
  --black: #0a0a0a;
  --white: #f5f0e8;
  --accent: #ffe034; 
  --yellow: #ffc4af; 
  --pink: #ff3cac;
  --blue: #3cffdc;
  --orange: #ff6b35;
  --purple: #7b2fff;
  --red: #ff2d2d;
  --green: #00ff87;

  /* Surfaces */
  --bg: #f5f0e8;
  --bg-dark: #0a0a0a;
  --card-bg: #ffffff;

  /* Bordures */
  --border: 3px solid var(--black);
  --border-thick: 5px solid var(--black);

  /* Ombres Neo-Brutalism — décalage dur, pas de flou */
  --shadow-sm: 4px 4px 0px var(--black);
  --shadow-md: 6px 6px 0px var(--black);
  --shadow-lg: 8px 8px 0px var(--black);
  --shadow-xl: 12px 12px 0px var(--black);

  /* Typographie */
  --font-display: "Bebas Neue", sans-serif;
  --font-mono: "Space Mono", monospace;
  --font-body: "DM Sans", sans-serif;

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Rayon de bordure — volontairement faible pour le style brut */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Transitions */
  --transition: 0.15s ease;

  /* Mobile safe areas */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--black);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

img,
video {
  display: block;
  max-width: 100%;
}

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

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

ul,
ol {
  list-style: none;
}

/* --- Typographie --- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(3rem, 14vw, 5rem);
}
h2 {
  font-size: clamp(2rem, 9vw, 3.5rem);
}
h3 {
  font-size: clamp(1.4rem, 6vw, 2rem);
}

p,
li,
label,
span {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* --- Utilitaires --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-upper {
  text-transform: uppercase;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.w-full {
  width: 100%;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}

/* --- Scrollbar personnalisée --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--black);
  border-radius: 0;
}

/* --- Focus visible accessible --- */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* --- Sélection de texte --- */
::selection {
  background: var(--yellow);
  color: var(--black);
}