/* ============ MURO · Design System — Tokens ============
   Contrato de variables para las 4 superficies.
   Paneles: acento tinta grafito, neutros cálidos.
   Web pública: estos semánticos se sobreescriben con la
   paleta del tenant (inline <style> generado desde BD).
   Tema por atributo: <html data-theme="light|dark">        */

:root {
  /* --- Neutros cálidos --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F5F2;
  --neutral-100: #EFECE7;
  --neutral-200: #E2DDD6;
  --neutral-300: #C9C2B9;
  --neutral-400: #A69E94;
  --neutral-500: #857D73;
  --neutral-600: #6A635A;
  --neutral-700: #514B44;
  --neutral-800: #38332E;
  --neutral-900: #24201C;
  --neutral-950: #171412;

  /* --- Tinta (acento de paneles) --- */
  --ink-300: #9DB0C3;
  --ink-400: #5F7C97;
  --ink-500: #3C5872;
  --ink-600: #2B4356;
  --ink-700: #1F3241;

  /* --- Estado --- */
  --success: #3E7A4C;
  --success-soft: #E4F0E6;
  --warning: #A9752B;
  --warning-soft: #F6ECDB;
  --danger:  #A03A33;
  --danger-soft: #F6E3E1;

  /* --- Tipografía --- */
  --font-display: var(--font-body);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.65rem, 1.35rem + 1.4vw, 2.1rem);
  --text-3xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3rem);
  --text-4xl:  clamp(2.6rem, 1.9rem + 3.8vw, 4.2rem);
  --text-5xl:  clamp(3rem, 2rem + 6vw, 6rem);
  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --tracking-wide: 0.14em;

  /* --- Espaciado --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(64px, 6vw + 32px, 120px);
  --content-max: 1200px;
  --content-pad: clamp(20px, 4vw, 48px);
  --hit-target: 44px;

  /* --- Radios, sombras, movimiento --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-2xl: 52px;
  --radius-pill: 999px;
  /* Curva cóncava («encaje»): tamaño del elemento que se encaja */
  --notch-sm: 24px;
  --notch-md: 40px;
  --notch-lg: 64px;
  --shadow-sm: 0 1px 2px rgba(23,20,18,0.06), 0 2px 8px rgba(23,20,18,0.06);
  --shadow-md: 0 2px 6px rgba(23,20,18,0.07), 0 12px 32px rgba(23,20,18,0.10);
  --shadow-lg: 0 4px 12px rgba(23,20,18,0.10), 0 24px 64px rgba(23,20,18,0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 550ms;
}

/* ============ Semánticos · LIGHT (default) ============ */
:root, [data-theme="light"] {
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-100);
  --surface-inverse: var(--neutral-950);
  --surface-accent-soft: #EDF1F5;
  --surface-band:    var(--neutral-950);
  --on-band:         var(--neutral-50);

  --text-heading: var(--neutral-950);
  --text-body:    var(--neutral-800);
  --text-muted:   var(--neutral-600);
  --text-inverse: var(--neutral-50);

  --accent:        var(--ink-600);
  --accent-strong: var(--ink-700);
  --accent-soft:   #E3EAF0;
  --on-accent:     #F8FAFC;
  --accent-2:      var(--ink-500);
  --detail:        var(--ink-400);

  --border-subtle: rgba(36, 32, 28, 0.10);
  --border-strong: rgba(36, 32, 28, 0.24);
  --link:       var(--ink-600);
  --link-hover: var(--ink-700);
  --focus-ring: var(--ink-400);
  --scrim: linear-gradient(180deg, rgba(23,20,18,0) 0%, rgba(23,20,18,0.72) 100%);
}

/* Espejo de los semánticos de página. Dentro de una banda oscura los
   tokens de superficie y texto se invierten para que lo anidado se
   adapte; estos conservan el valor de la página para las piezas que
   deben seguir siendo claras (una tarjeta apoyada sobre una foto).
   Se declaran en :root, así que resuelven el valor final del tema y de
   la paleta del tenant. */
:root {
  --surface-card-solid: var(--surface-card);
  --text-heading-page: var(--text-heading);
  --text-body-page: var(--text-body);
  --text-muted-page: var(--text-muted);
}

/* ============ Semánticos · DARK ============ */
[data-theme="dark"] {
  --surface-page:    var(--neutral-950);
  --surface-card:    #201C19;
  --surface-raised:  #2A2521;
  --surface-inverse: var(--neutral-50);
  --surface-accent-soft: #232A31;
  --surface-band:    #0F0D0C;
  --on-band:         var(--neutral-50);

  --text-heading: var(--neutral-50);
  --text-body:    var(--neutral-200);
  --text-muted:   var(--neutral-400);
  --text-inverse: var(--neutral-950);

  --accent:        var(--ink-400);
  --accent-strong: var(--ink-300);
  --accent-soft:   #26313C;
  --on-accent:     #F8FAFC;
  --accent-2:      var(--ink-300);
  --detail:        var(--ink-300);

  --border-subtle: rgba(247, 245, 242, 0.10);
  --border-strong: rgba(247, 245, 242, 0.24);
  --link:       var(--ink-300);
  --link-hover: #C2D1DE;
  --focus-ring: var(--ink-400);
  --scrim: linear-gradient(180deg, rgba(23,20,18,0) 0%, rgba(23,20,18,0.85) 100%);

  --success-soft: #22312A;
  --warning-soft: #362C1C;
  --danger-soft:  #38221F;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  font-weight: 650;
  margin: 0;
  text-wrap: balance;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }

/* Ocultar por atributo gana a cualquier `display` de componente: sin
   esto, un `.pick-card { display: grid }` seguiría viéndose con [hidden]. */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ Texturas de fondo (sin peso de red) ============
   Se aplican como capa sobre el color de la sección; el tono lo
   toman del texto actual, así funcionan en claro y en oscuro.   */
:root {
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  --texture-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23808080' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
  --texture-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23808080' opacity='0.75'/%3E%3C/svg%3E");
  /* Círculos concéntricos: el motivo queda dentro del mosaico, así al
     repetirse no se ven costuras. */
  --texture-circles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='none' stroke='%23808080' stroke-opacity='0.55'%3E%3Ccircle cx='300' cy='300' r='288'/%3E%3Ccircle cx='300' cy='300' r='216'/%3E%3Ccircle cx='300' cy='300' r='144'/%3E%3Ccircle cx='300' cy='300' r='72'/%3E%3C/svg%3E");
}

/* ============ Curva cóncava — motivo «encaje» ============
   Recorta una esquina para encajar un botón o chip circular.
   Ajusta el tamaño con --n (por defecto --notch-md).          */
.notch-tl, .notch-tr, .notch-bl, .notch-br { --n: var(--notch-md); }
.notch-tl { -webkit-mask: radial-gradient(var(--n) at 0 0, transparent calc(var(--n) - 1px), #000 var(--n)); mask: radial-gradient(var(--n) at 0 0, transparent calc(var(--n) - 1px), #000 var(--n)); }
.notch-tr { -webkit-mask: radial-gradient(var(--n) at 100% 0, transparent calc(var(--n) - 1px), #000 var(--n)); mask: radial-gradient(var(--n) at 100% 0, transparent calc(var(--n) - 1px), #000 var(--n)); }
.notch-bl { -webkit-mask: radial-gradient(var(--n) at 0 100%, transparent calc(var(--n) - 1px), #000 var(--n)); mask: radial-gradient(var(--n) at 0 100%, transparent calc(var(--n) - 1px), #000 var(--n)); }
.notch-br { -webkit-mask: radial-gradient(var(--n) at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n)); mask: radial-gradient(var(--n) at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n)); }
