/* =========================================================
   Essence · tokens.css — Sistema de diseño white-label.
   Paleta ESSENCE Hair Studio (beige/arena/taupe/marrón/carbón/blanco roto).
   Conserva TODOS los nombres de variable del tokens.css de WebPadelSlam para
   que base/layout/components/utilities/polish copiados funcionen sin tocar.
   Las claves de color (--brand, --accent, --bg, --surface, --text, --muted,
   --brand-contrast) las puede sobreescribir la BD por instalación vía el
   bloque <style id="brand-vars"> inyectado en app/index.php (white-label).
   ========================================================= */

:root {
  /* Marca — escala derivada del taupe/marrón ESSENCE */
  --brand-50:  #f7f5f2;   /* blanco roto */
  --brand-100: #ece3da;
  --brand-200: #e8ddd3;   /* arena */
  --brand-300: #d6c4b6;   /* beige principal */
  --brand-400: #b9a89b;   /* taupe */
  --brand-500: #8d7b6e;   /* marrón suave */
  --brand-600: #6f6157;
  --brand-700: #514741;
  --brand-800: #3a332f;
  --brand-900: #2f2a28;   /* carbón */

  --accent: #b9a89b;      /* taupe: acentos, links, focos */
  --accent-2: #d6c4b6;    /* beige: fondos suaves de énfasis */
  --gold: #b08a3e;        /* dorado apagado: destacados */

  /* Semánticos — tonos apagados que casan con la paleta cálida */
  --success: #4a7a5c;
  --warning: #b08a3e;
  --danger:  #a0524d;
  --info:    #7c8a96;

  /* Tipografía — Michroma para títulos/logo, Montserrat para texto */
  --font-display: "Michroma", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --lh-tight: 1.15;
  --lh-base: 1.55;

  /* Espaciado (escala 4px) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-10: 4rem;

  /* Radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* Anchos */
  --max-w: 1240px;
  --sidebar-w: 256px;

  /* Transiciones */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-fast: 140ms var(--ease-out);
  --t: 200ms var(--ease-out);
  --t-slow: 320ms var(--ease-out);
}

/* ---------- Tema claro (por defecto en ESSENCE) ---------- */
:root, [data-theme="light"] {
  --bg: #f7f5f2;          /* blanco roto */
  --bg-2: #f1eae3;        /* arena atenuada */
  --surface: #ffffff;
  --surface-2: #e8ddd3;   /* arena */
  --surface-raised: #ffffff;
  --panel: #ffffff;
  --border: #e3dad1;
  --border-strong: #cbbbad;

  --text: #2f2a28;        /* carbón */
  --text-soft: #5c534e;
  --muted: #8d7b6e;       /* marrón suave */

  --brand: #2f2a28;       /* carbón: acción principal (botones premium oscuros) */
  --brand-contrast: #f7f5f2;
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);

  --shadow-sm: 0 1px 2px rgba(47,42,40,.06);
  --shadow: 0 10px 30px -12px rgba(47,42,40,.16);
  --shadow-lg: 0 28px 60px -22px rgba(47,42,40,.24);

  --hero-grad: radial-gradient(120% 120% at 0% 0%, #e8ddd3 0%, #f7f5f2 55%);
  --brand-grad: linear-gradient(135deg, #b9a89b, #8d7b6e);
  color-scheme: light;
}

/* ---------- Tema oscuro (opcional): carbón + beige ---------- */
[data-theme="dark"] {
  --bg: #211d1b;
  --bg-2: #2f2a28;
  --surface: #2a2523;
  --surface-2: #35302d;
  --surface-raised: #302b28;
  --panel: #2a2523;
  --border: #3e3835;
  --border-strong: #4c443f;

  --text: #f7f5f2;
  --text-soft: #d6c4b6;
  --muted: #b9a89b;

  --brand: #d6c4b6;       /* en oscuro el CTA es claro sobre fondo carbón */
  --brand-contrast: #2f2a28;
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.65);

  --hero-grad: radial-gradient(120% 120% at 0% 0%, #3a332f 0%, #211d1b 55%);
  --brand-grad: linear-gradient(135deg, #b9a89b, #8d7b6e);
  color-scheme: dark;
}