/* ─────────────────────────────────────────────────────────────
   Carafe — Design tokens
   Ported from proto/src/tokens.css. 3 palette directions, swappable
   via [data-palette] on the root. App default: terracotta / sans.
   The reset + type classes are applied GLOBALLY here (the app has
   no .wc-app wrapper).
   ───────────────────────────────────────────────────────────── */

:root,
[data-palette="bordeaux"] {
  /* Brand */
  --wc-primary: #6B2434;
  --wc-primary-hover: #58202A;
  --wc-primary-active: #46181F;
  --wc-primary-subtle: #F4E4E6;
  --wc-primary-tint: #FDF6F6;
  --wc-on-primary: #FFFFFF;
  --wc-accent: #B8973A;
  --wc-accent-subtle: #F5EDD9;

  /* Surface */
  --wc-bg: #F8F3EA;
  --wc-surface: #FFFFFF;
  --wc-surface-elevated: #FFFFFF;
  --wc-surface-sunken: #F1E9DA;
  --wc-surface-tinted: #FBF6EC;

  /* Text */
  --wc-ink: #1B1612;
  --wc-ink-2: #3A332C;
  --wc-ink-muted: #7E7466;
  --wc-ink-soft: #A89E8E;
  --wc-on-dark: #F8F3EA;

  /* Lines */
  --wc-border: #E6DCC9;
  --wc-border-strong: #D6C9AF;
  --wc-divider: #EFE6D2;

  /* Semantic */
  --wc-success: #2F6B3D;
  --wc-success-subtle: #E3EFDF;
  --wc-warning: #B96B1B;
  --wc-warning-subtle: #FBEFD9;
  --wc-danger: #A33028;
  --wc-danger-subtle: #F7E1DE;
  --wc-info: #3C5A85;
  --wc-info-subtle: #E2EAF4;

  /* Wine colors (dots, charts) */
  --wc-wine-red: #A53546;
  --wc-wine-white: #EFE3A4;
  --wc-wine-rose: #E59FA0;
  --wc-wine-champagne: #DEC57E;
  --wc-wine-orange: #C98446;

  /* Drinking-window phases */
  --wc-phase-garde: #C3B997;
  --wc-phase-approche: #E1B768;
  --wc-phase-apogee: #6B2434;
  --wc-phase-apogee-peak: #4A141F;
  --wc-phase-decline: #B07A6B;
  --wc-phase-passe: #8B8378;
}

[data-palette="terracotta"] {
  --wc-primary: #A8423A;
  --wc-primary-hover: #8E3530;
  --wc-primary-active: #762B26;
  --wc-primary-subtle: #F6E1DC;
  --wc-primary-tint: #FBEFEB;
  --wc-on-primary: #FFFFFF;
  --wc-accent: #6F6235;
  --wc-accent-subtle: #EDE5CC;

  --wc-bg: #F5EDE2;
  --wc-surface: #FFFCF6;
  --wc-surface-elevated: #FFFFFF;
  --wc-surface-sunken: #ECE0CE;
  --wc-surface-tinted: #FAF1E2;

  --wc-ink: #2A1A12;
  --wc-ink-2: #4A3326;
  --wc-ink-muted: #877263;
  --wc-ink-soft: #B0978A;
  --wc-on-dark: #F5EDE2;

  --wc-border: #E5D4BE;
  --wc-border-strong: #D0B89B;
  --wc-divider: #EDDFCB;

  --wc-success: #3A6B33;
  --wc-success-subtle: #E0EBD8;
  --wc-warning: #B96B1B;
  --wc-warning-subtle: #FBEFD9;
  --wc-danger: #8E2A22;
  --wc-danger-subtle: #F4DDD8;
  --wc-info: #45627E;
  --wc-info-subtle: #DFE7F1;

  --wc-wine-red: #B33A4D;
  --wc-wine-white: #EDE0A0;
  --wc-wine-rose: #DF8E91;
  --wc-wine-champagne: #DBC174;
  --wc-wine-orange: #C57A3A;

  --wc-phase-garde: #C0B190;
  --wc-phase-approche: #DBA75A;
  --wc-phase-apogee: #A8423A;
  --wc-phase-apogee-peak: #7A2620;
  --wc-phase-decline: #A87060;
  --wc-phase-passe: #877263;
}

[data-palette="sapin"] {
  --wc-primary: #2C4435;
  --wc-primary-hover: #233628;
  --wc-primary-active: #1A2A1F;
  --wc-primary-subtle: #DDE6DD;
  --wc-primary-tint: #EEF3EC;
  --wc-on-primary: #F4EFE3;
  --wc-accent: #722F37;
  --wc-accent-subtle: #EFDDDF;

  --wc-bg: #F3F0E6;
  --wc-surface: #FFFDF6;
  --wc-surface-elevated: #FFFFFF;
  --wc-surface-sunken: #E8E2D1;
  --wc-surface-tinted: #F8F4E8;

  --wc-ink: #161A14;
  --wc-ink-2: #34382F;
  --wc-ink-muted: #6F7263;
  --wc-ink-soft: #9C9D8A;
  --wc-on-dark: #F3F0E6;

  --wc-border: #DCD8C6;
  --wc-border-strong: #B9B59E;
  --wc-divider: #E7E1CD;

  --wc-success: #2C5E36;
  --wc-success-subtle: #DBE8D7;
  --wc-warning: #A8651C;
  --wc-warning-subtle: #F1E5CE;
  --wc-danger: #862C2A;
  --wc-danger-subtle: #EFD7D5;
  --wc-info: #3E5B7A;
  --wc-info-subtle: #DDE5EE;

  --wc-wine-red: #A93B49;
  --wc-wine-white: #E2D595;
  --wc-wine-rose: #D89093;
  --wc-wine-champagne: #CFB66A;
  --wc-wine-orange: #B47236;

  --wc-phase-garde: #A8B097;
  --wc-phase-approche: #C99F4F;
  --wc-phase-apogee: #2C4435;
  --wc-phase-apogee-peak: #182D20;
  --wc-phase-decline: #9A7264;
  --wc-phase-passe: #807E6E;
}

/* ─── Spacing · Radii · Shadows · Motion ─── */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(31, 22, 18, 0.04);
  --sh-2: 0 1px 2px rgba(31, 22, 18, 0.04), 0 4px 16px rgba(31, 22, 18, 0.06);
  --sh-3: 0 4px 12px rgba(31, 22, 18, 0.08), 0 16px 48px rgba(31, 22, 18, 0.14);

  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 380ms;
  --d-spring: 520ms;
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Type families (swappable via [data-font]) ─── */
[data-font="serif"] {
  --ff-display: 'Instrument Serif', 'Newsreader', ui-serif, Georgia, serif;
  --ff-ui: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-spacing: -0.01em;
  --display-weight: 400;
}
[data-font="sans"] {
  --ff-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ff-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-spacing: -0.025em;
  --display-weight: 600;
}
[data-font="editorial"] {
  --ff-display: 'Newsreader', 'Instrument Serif', ui-serif, Georgia, serif;
  --ff-ui: 'DM Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --display-spacing: -0.005em;
  --display-weight: 500;
}
:root {
  /* fallback if data-font not set */
  --ff-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ff-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-spacing: -0.025em;
  --display-weight: 600;
}

/* ─── Global reset (app has no .wc-app wrapper) ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
}
button:focus-visible {
  outline: 2px solid var(--wc-primary);
  outline-offset: 2px;
}

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

/* ─── Type classes ─── */
.t-display {
  font-family: var(--ff-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.05;
  font-size: 32px;
}
.t-h1 {
  font-family: var(--ff-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.1;
  font-size: 30px;
}
.t-h2 {
  font-family: var(--ff-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.15;
  font-size: 24px;
}
.t-h3 {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.t-body-lg { font-family: var(--ff-ui); font-size: 16px; line-height: 1.5; }
.t-body    { font-family: var(--ff-ui); font-size: 14px; line-height: 1.5; }
.t-small   { font-family: var(--ff-ui); font-size: 13px; line-height: 1.4; }
.t-caption {
  font-family: var(--ff-ui);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ─── Utility ─── */
.wc-hide-scroll::-webkit-scrollbar { display: none; }
.wc-hide-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* iOS zoome automatiquement sur les champs dont la police < 16px au focus.
   On force 16px sur mobile pour l'éviter (sans bloquer le pinch-zoom volontaire). */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ─── Composants réutilisables (extraction des styles inline répétés) ─── */
/* Carte « surface » de base : fond + bordure + rayon, partagée par les blocs. */
.wc-surface-card {
  background: var(--wc-surface);
  border: 1px solid var(--wc-divider);
  border-radius: var(--r-md);
}
/* Carte d'un vin (liste cave) — cf. WineCard. */
.wc-card {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--wc-surface);
  border: 1px solid var(--wc-divider);
  border-radius: var(--r-md);
  text-align: left;
  align-items: stretch;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.wc-card--compact { gap: 10px; padding: 12px 16px; }
.wc-card:active { transform: scale(0.985); }
@media (hover: hover) {
  .wc-card:hover { box-shadow: var(--sh-2); }
}

/* ─── Keyframes ─── */
@keyframes wc-fade-in { from { opacity: 0.001; } to { opacity: 1; } }
@keyframes wc-rise { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes wc-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes wc-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes wc-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes wc-spin { to { transform: rotate(360deg); } }
@keyframes wc-slide-right { from { transform: translateX(40px); } to { transform: translateX(0); } }

/* Auth logo entrance — a gentle pour-and-settle (transform only) */
@keyframes wc-logo-in {
  0%   { transform: rotate(-14deg) scale(0.6) translateY(8px); }
  35%  { transform: rotate(6deg) scale(1.08) translateY(0); }
  55%  { transform: rotate(-3deg) scale(0.98); }
  72%  { transform: rotate(1.5deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}