/* ==========================================================================
   Ycobe · tokens de diseño
   Cambia aquí la marca y se actualiza toda la aplicación.
   ========================================================================== */
:root {
  /* Marca Ycobe: verde salvia + champán */
  --primary: #2F5D50;
  --primary-hover: #264C41;
  --on-primary: #FFFFFF;
  --accent: #C9A27E;
  --accent-soft: #F3EADF;

  /* Color de la peluquería en su web pública (se sobrescribe por salón) */
  --brand: var(--primary);
  --on-brand: var(--on-primary);

  /* Neutros cálidos */
  --bg: #FAF8F6;
  --surface: #FFFFFF;
  --surface-2: #F4F1ED;
  --text: #1F1D1B;
  --muted: #6B6560;
  --border: #E6E1DC;
  --focus: #2F5D50;

  /* Estados */
  --danger: #A23B2A;
  --danger-soft: #F8E7E3;
  --success: #2F6B47;
  --success-soft: #E5F1E8;

  /* Forma */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 29, 27, .06);
  --shadow: 0 6px 20px rgba(31, 29, 27, .08);

  /* Tipografía */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: .78rem;
  --text-sm: .88rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.75rem;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #7FB7A4;
    --primary-hover: #93C6B4;
    --on-primary: #10201B;
    --accent: #D9B894;
    --accent-soft: #3A3127;

    --bg: #141413;
    --surface: #1E1D1B;
    --surface-2: #262522;
    --text: #F2EFEC;
    --muted: #A8A19A;
    --border: #34312E;
    --focus: #93C6B4;

    --danger: #E08A7A;
    --danger-soft: #3A2420;
    --success: #8CC9A2;
    --success-soft: #1F3326;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}