/* ==========================================================================
   Lucidez · Tokens de diseño (FASE 0)
   Sistema aprobado en la pasada de direccion. Rol fijo por color:
   el Rosa Viejo es el unico acento emocional; el Oro Suave aparece solo
   en el momento de excelencia y nunca junto al rosa en el mismo bloque.
   ========================================================================== */

:root {
  /* --- Color, rol fijo ------------------------------------------------- */
  --c-navy:            #182742; /* tinta, secciones profundas, modo noche   */
  --c-navy-soft:       #223354; /* superficies del modo noche               */
  --c-canvas:          #FBFAF8; /* lienzo diurno, el aire que respira       */
  --c-greige:          #EFECE7; /* tarjetas, separadores                    */
  --c-greige-border:   #E4DFD8; /* borde de tarjetas                        */
  --c-rose:            #C28E96; /* acento unico: amor, CTA principal        */
  --c-rose-tint:       #F3E7E7; /* tinte de fondo del acento                */
  --c-gold:            #C7A15A; /* excelencia, raro                         */
  --c-ink-soft:        #6B6F7A; /* texto secundario sobre lienzo            */
  --c-on-navy:         #FBFAF8; /* texto sobre navy                         */
  --c-on-navy-soft:    #A9B4C8; /* apoyo sobre navy                         */

  /* --- Roles semanticos (dia por defecto) ----------------------------- */
  --bg:            var(--c-canvas);
  --surface:       var(--c-greige);
  --surface-border:var(--c-greige-border);
  --text:          var(--c-navy);
  --text-soft:     var(--c-ink-soft);
  --accent:        var(--c-rose);
  --accent-tint:   var(--c-rose-tint);
  --excellence:    var(--c-gold);

  /* --- Tipografia ------------------------------------------------------ */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Ejes de Fraunces: SOFT alto, contraste bajo, para calidez sin drama.  */
  --fraunces-axes: "SOFT" 60, "WONK" 0, "opsz" 120;

  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1.0625rem;  /* 17px */
  --fs-md:   1.375rem;   /* 22px */
  --fs-lg:   1.9375rem;  /* 31px */
  --fs-xl:   2.75rem;    /* 44px */
  --fs-2xl:  3.75rem;    /* 60px */

  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-body:   1.6;

  --fw-body:    400;
  --fw-label:   500;
  --fw-display: 450;

  /* --- Espaciado y radios (aire amplio, minimalismo con precision) ----- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(24, 39, 66, 0.04),
                 0 8px 24px rgba(24, 39, 66, 0.06);
  --shadow-dock: 0 2px 6px rgba(24, 39, 66, 0.08),
                 0 12px 32px rgba(24, 39, 66, 0.12);

  /* --- Curvas de easing (custom; las de CSS por defecto son debiles) --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* entradas y respuesta */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* movimiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* dock y paneles         */

  --dur-press:   140ms;  /* feedback de presion 100 a 160ms */
  --dur-fast:    200ms;  /* dropdowns, respuesta al usuario  */
  --dur-view:    260ms;  /* cambio de vista                  */

  /* Superficie de layout */
  --header-h: 60px;
  --dock-h:   72px;
  --view-max: 560px; /* la app respira: columna estrecha y centrada */
}

/* ==========================================================================
   El Ciclo del Dia: los roles semanticos cambian con el momento del dia.
   data-cycle lo fija theme.js segun la hora local (o un override manual).
   ========================================================================== */

:root[data-cycle="amanecer"] {
  --bg:            var(--c-canvas);
  --surface:       #FFFFFF;
  --surface-border:var(--c-greige-border);
  --text:          var(--c-navy);
  --text-soft:     var(--c-ink-soft);
  --accent:        var(--c-rose);
  --accent-tint:   var(--c-rose-tint);
}

:root[data-cycle="dia"] {
  --bg:            #FFFFFF;
  --surface:       var(--c-greige);
  --surface-border:var(--c-greige-border);
  --text:          var(--c-navy);
  --text-soft:     var(--c-ink-soft);
  --accent:        var(--c-rose);
  --accent-tint:   var(--c-rose-tint);
}

:root[data-cycle="noche"] {
  --bg:            var(--c-navy);
  --surface:       var(--c-navy-soft);
  --surface-border:rgba(169, 180, 200, 0.16);
  --text:          var(--c-on-navy);
  --text-soft:     var(--c-on-navy-soft);
  --accent:        var(--c-rose);
  --accent-tint:   rgba(194, 142, 150, 0.16);
}