/* =====================================================================
   01 · TOKENS
   Colores, tipografía y medidas compartidas por toda la app.
   ---------------------------------------------------------------------
   Enfoque mobile-first: los estilos base son para celular y se amplían
   con media queries de ancho mínimo, siempre en este orden:

     (sin query)            celular            < 600px
     @media (min-width: 600px)   tablet / celular horizontal
     @media (min-width: 900px)   escritorio: aparecen las tablas
     @media (min-width: 1100px)  escritorio amplio

   Las variables CSS no se pueden usar dentro de @media, por eso los
   valores quedan documentados aquí y se repiten literalmente.
   ===================================================================== */

:root{
  /* Marca */
  --navy:#16204A; --navy-2:#223172;
  --pine:#FFCC2E; --pine-soft:#FFF3C9;
  --leaf:#2E9E55; --leaf-soft:#E2F4E8;
  --ember:#E8662A; --ember-soft:#FDE8DC;

  /* Superficies y texto (tema claro) */
  --bg:#F3F5FA; --panel:#FFFFFF; --ink:#141A33; --muted:#5A6283; --line:#DCE1EE; --row:#F7F8FC;
  --good:#1E8A4A; --bad:#C43D3D;
  --gold:#E5B000; --silver:#9AA3B5; --bronze:#C07A3E;
  --zone-top-ink:#7A5C00;

  /* Tipografía */
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;

  /* Radios y espacios */
  --r-lg:16px; --r-md:10px; --r-sm:6px;
  --gutter:16px;
}

/* Tema oscuro: automático por sistema o forzado con el botón ◐ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1330; --panel:#151D44; --ink:#ECEFFA; --muted:#A1A9C9; --line:#283467; --row:#1A2350;
    --pine-soft:#3A3315; --leaf-soft:#123222; --ember-soft:#3A2116; --good:#4CC57C; --bad:#F07272;
    --zone-top-ink:var(--pine);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1330; --panel:#151D44; --ink:#ECEFFA; --muted:#A1A9C9; --line:#283467; --row:#1A2350;
  --pine-soft:#3A3315; --leaf-soft:#123222; --ember-soft:#3A2116; --good:#4CC57C; --bad:#F07272;
  --zone-top-ink:var(--pine);
}