/* ============================================================================
   dharma-tokens.css  ·  Capa 0 del sistema de diseño dhTordo
   Dharma Projects — Desarrollamos soluciones, construimos valor

   Este archivo NO contiene un solo estilo de componente. Solo variables.
   Cambiando los valores de aquí cambia el sistema entero.

   Orden de carga obligatorio:
     1. bootstrap.css            (el que ya usa el sistema)
     2. dharma-tokens.css        <-- este archivo
     3. dharma-bridge-bootstrap.css
     4. dharma-components.css
     5. marcas/<distribuidora>.css
     6. estilos propios del sistema (los que ya existen)
   ============================================================================ */

:root{
  /* ---- Matiz de instancia -------------------------------------------------
     Numero entre 0 y 360. Solo se usa cuando la distribuidora NO usa el
     preset Dharma. Ver marcas/_plantilla.css                                */
  --h: 252;

  --accent:       hsl(var(--h) 74% 60%);
  --accent-press: hsl(var(--h) 74% 52%);
  --accent-ink:   hsl(var(--h) 68% 46%);
  --accent-soft:  hsl(var(--h) 74% 60% / .13);
  --accent-line:  hsl(var(--h) 74% 60% / .32);
  --iri:          hsl(calc(var(--h) - 92) 62% 46%);
  --iri-soft:     hsl(calc(var(--h) - 92) 62% 46% / .13);

  /* Boton primario aparte: el preset Dharma usa degradado y texto oscuro,
     los matices planos usan texto blanco.                                   */
  --pri-bg:   var(--accent);
  --pri-bg-h: var(--accent-press);
  --pri-fg:   #fff;
  --nav-on:   #fff;

  /* ---- Escala Dharma: marca de la casa, siempre disponible --------------- */
  --au-hi:  #EFDCA6;   /* oro claro    */
  --au:     #C9A227;   /* oro nucleo   */
  --au-dp:  #8E6F17;   /* oro profundo */
  --ink:    #0B0C0E;   /* negro Dharma */

  /* ---- Semanticos ------------------------------------------------------- */
  --ok:#178E5C;   --ok-soft:#178E5C1f;
  --warn:#B87514; --warn-soft:#B875141f;
  --bad:#C8393C;  --bad-soft:#C8393C1f;
  --info:#2A6FC4; --info-soft:#2A6FC41f;

  /* ---- Superficies ------------------------------------------------------ */
  --bg:#F1F3F6;
  --surface:#FFFFFF;
  --surface-2:#F8F9FB;
  --surface-3:#EFF1F5;
  --line:#E2E6EC;
  --line-soft:#EDF0F4;
  --text:#0E1218;
  --text-2:#59626F;
  --text-3:#8B94A2;

  /* ---- Menu lateral ----------------------------------------------------- */
  --nav-bg:#0E1219;
  --nav-bg-2:#161B24;
  --nav-text:#A8B1BF;
  --nav-line:#20262F;
  --nav-sec-c:#5B6473;

  /* ---- Forma ------------------------------------------------------------ */
  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:20px;

  /* ---- Elevacion -------------------------------------------------------- */
  --sh-1:0 1px 2px rgba(14,18,24,.06),0 1px 1px rgba(14,18,24,.04);
  --sh-2:0 4px 12px rgba(14,18,24,.07),0 1px 3px rgba(14,18,24,.05);
  --sh-3:0 18px 48px rgba(14,18,24,.16),0 4px 12px rgba(14,18,24,.08);

  /* ---- Medidas del armazon ---------------------------------------------- */
  --nav-w:258px;
  --nav-w-mini:72px;
  --top-h:60px;
  --row-h:44px;        /* densidad de tabla: 44 comoda / 36 compacta */

  /* ---- Tipografia -------------------------------------------------------
     Si no se quiere depender de Google Fonts, descargar las familias a
     /assets/fonts/ y declararlas con @font-face. Los fallbacks ya estan.  */
  --f-display:"Bricolage Grotesque", Georgia, serif;
  --f-ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-mark:"Saira", var(--f-ui);
}

/* ============================================================================
   PRESET DE FABRICA: ORO DHARMA
   Se activa con <html data-brand="dharma">. Es el estado por defecto.
   ========================================================================== */
[data-brand="dharma"]{
  --accent:#B4901F;          /* oro profundo: legible sobre blanco */
  --accent-press:#9A7A17;
  --accent-ink:#8A6C18;      /* para texto sobre superficie clara */
  --accent-soft:rgba(201,162,39,.14);
  --accent-line:rgba(201,162,39,.42);
  --iri:#DCC077;
  --iri-soft:rgba(220,192,119,.16);

  --pri-bg:linear-gradient(135deg,#DCBB55,#B4901F);
  --pri-bg-h:linear-gradient(135deg,#CFAC44,#9A7A17);
  --pri-fg:#1A1A1C;          /* letra grafito sobre oro, como el oro real */

  --nav-bg:#0B0C0E;
  --nav-bg-2:#16171B;
  --nav-line:#24252A;
  --nav-sec-c:#5B5C63;
  --nav-on:#F2E1AE;
}

/* ============================================================================
   MODO OSCURO   ·   <html data-theme="dark">
   ========================================================================== */
[data-theme="dark"]{
  --bg:#090A0D;
  --surface:#111318;
  --surface-2:#161920;
  --surface-3:#1C1F27;
  --line:#232630;
  --line-soft:#1B1E26;
  --text:#E9EDF3;
  --text-2:#98A2B1;
  --text-3:#6A7382;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 20px 56px rgba(0,0,0,.6);
}

/* En oscuro el oro puede brillar: ya no compite con fondo blanco. */
[data-brand="dharma"][data-theme="dark"]{
  --accent:#D4B348;
  --accent-ink:#E3C87A;
  --accent-soft:rgba(212,179,72,.16);
  --accent-line:rgba(212,179,72,.4);
  --iri:#8E6F17;
}

/* ============================================================================
   BASE
   ========================================================================== */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Numeros tabulares. Aplicar a TODA cifra: importes, cantidades, codigos,
   CUIT, fechas. Es la mitad del efecto "sistema profesional".              */
.num, .dh-num{
  font-family:var(--f-data);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}