@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Phlou — tokens compartidos
   Navy/sage = marca · Señal = alerta. Light-first.
   Fuente de verdad de la marca: design/app/phlou-app.css (Design System).
   ============================================================ */
:root{
  /* Marca (navy / sage) */
  --ink:    #1B2A3A;  /* navy oscuro — tinta, estructura */
  --ink-2:  #34465A;  /* cuerpo */
  --clay:   #2B4260;  /* acento de marca (navy), CTAs, wordmark */
  --clay-d: #22384F;
  --caramel:#4C6B8B;  /* azul-acero — acento secundario */
  --sage:   #798976;  /* verde salvia — acento natural */
  --sand:   #F6F7F3;  /* fondo principal (off-white frío) */
  --sand-2: #E5E9DD;
  --stone:  #8893A1;  /* texto secundario (gris-azulado) */
  --line:   #E8EBE2;
  --line-2: #DEE2D7;
  --card:   #FFFFFF;
  --paper:  #F3F5EF;

  /* Señal (reservada — nunca decoración) */
  --warning:#9C6A18;
  --warn-bg:#F3E4BD;
  --warn-tx:#7A5215;
  --critical:#AF4A30;
  --crit-bg:#F1DACD;
  --crit-tx:#8F3A24;
  --ok:     #3F7A4E;
  --ok-bg:  #DBE9D4;
  --ok-tx:  #356B43;

  --font-display:"Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);color:var(--ink);line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* textura de papel sutil — se aplica como ::before en un contenedor relative */
.grain::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.4;mix-blend-mode:multiply;
}