/* ===========================================================================
   Atic Girls — fichas del sistema visual
   ===========================================================================
   Dirección: NOCTURNO ARQUITECTÓNICO. La noche de Barcelona vista desde un
   ático: carbón azulado, la línea del techo dibujada con reglas finas y una
   sola luz ámbar, la de la ventana encendida.

   Es deliberadamente lo contrario de Lounge Velvet (papel blanco, retícula
   editorial, acento vino) y de Fenix Secret (negro con dorado y texturas).
   Aquí no hay brillos ni degradados: hay oscuridad, aire y una luz.

   El sitio se compromete con UN aspecto — `color-scheme: dark` — en vez de
   duplicar la paleta. Una marca nocturna que se vuelve blanca según el ajuste
   del sistema deja de ser una marca.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- Superficies --------------------------------------------------------
     Cuatro planos, no más. La profundidad la dan las reglas, no las sombras:
     una sombra sobre fondo oscuro es humo, no relieve. */
  --night:        #0E1114;   /* fondo de página */
  --night-raised: #14181D;   /* tarjetas, formularios */
  --night-sunken: #090B0D;   /* hueco de imagen, pie */
  --night-glass:  rgba(20, 24, 29, 0.86); /* cabecera al desplazar */

  /* --- Tinta --------------------------------------------------------------
     Blanco cálido, nunca #FFF: el blanco puro sobre negro vibra y en un
     párrafo largo cansa la vista. */
  --ink:        #ECE6DF;
  --ink-soft:   #A8A29B;
  --ink-mute:   #6F6A65;
  --ink-invert: #0E1114;

  /* --- Reglas -------------------------------------------------------------
     La retícula se ve. Son estructura, no decoración. */
  --rule:        #23282E;
  --rule-strong: #38404A;
  --rule-hair:   #1A1E23;

  /* --- Acento -------------------------------------------------------------
     Uno solo, y se usa poco: enlaces, subrayado activo, botón principal.
     Es el ámbar de una ventana encendida en un edificio a oscuras. */
  --amber:       #C8873F;
  --amber-hover: #E3A75E;
  --amber-tint:  rgba(200, 135, 63, 0.12);
  --amber-line:  rgba(200, 135, 63, 0.38);

  /* Señales de estado, apagadas para no romper la noche. */
  --ok:      #5B9E77;
  --ok-tint: rgba(91, 158, 119, 0.14);
  --warn:    #C2913C;
  --danger:  #C4636A;
  --danger-tint: rgba(196, 99, 106, 0.14);

  /* --- Tipografía ---------------------------------------------------------
     Cormorant Garamond para titular, Jost para texto.

     Cormorant es una serif de contraste alto y trazo fino: sobre fondo oscuro
     el trazo fino se "quema" un poco, así que se usa GRANDE y en peso 300-400,
     nunca en cuerpos pequeños. Jost es una geométrica de la familia de Futura,
     de líneas rectas: sostiene el carácter arquitectónico y es legible en
     tamaños pequeños, que es donde Cormorant no llega. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-text:    'Jost', 'Futura', 'Century Gothic', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Las versalitas espaciadas son la firma tipográfica del sitio: aparecen en
     cada etiqueta, cada antetítulo y cada pie de dato. */
  --label-size:  0.6875rem;
  --label-track: 0.18em;
  --display-track: 0.005em;

  --weight-light: 300;
  --weight-body:  400;
  --weight-mid:   500;

  /* Escala fluida. Los pasos altos suben más que en una maqueta clara: sobre
     negro, un titular necesita cuerpo para no desaparecer. */
  --step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.53rem + 1.00vw, 2.30rem);
  --step-4:  clamp(2.07rem, 1.75rem + 1.60vw, 3.00rem);
  --step-5:  clamp(2.49rem, 1.99rem + 2.50vw, 3.90rem);
  --step-6:  clamp(2.99rem, 2.22rem + 3.85vw, 5.10rem);
  --step-7:  clamp(3.58rem, 2.40rem + 5.90vw, 6.60rem);

  --leading-tight: 1.04;   /* titulares grandes en Cormorant */
  --leading-snug:  1.24;
  --leading-body:  1.68;

  /* --- Retícula y ritmo ---------------------------------------------------- */
  --measure:      68ch;
  --gutter:       clamp(1.15rem, 0.8rem + 1.8vw, 2.75rem);
  --shell:        min(100% - (var(--gutter) * 2), 82rem);
  --shell-narrow: min(100% - (var(--gutter) * 2), 44rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* --- Formas -------------------------------------------------------------
     Todo recto. El único radio es el de los controles, y es mínimo: una
     esquina redonda en una rejilla de fotos rompe la línea de la fachada. */
  --radius-none: 0;
  --radius-soft: 2px;

  /* --- Movimiento --------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 460ms;

  /* Relación de aspecto del retrato: 3:4, el formato de una ventana vertical.
     Un 2:3 alargaría demasiado la rejilla en móvil. */
  --portrait: 3 / 4;

  --header-height: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}