/* ============================================================
   em.pren.do — Design Tokens
   Colors, typography, spacing, radii, shadows, motion.
   Single source of truth: import this file from any artifact.
   ============================================================ */

/* -- Fonts --------------------------------------------------- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("./fonts/Lato-Hairline.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("./fonts/Lato-HairlineItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("./fonts/Lato-Light.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("./fonts/Lato-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/Lato-Regular.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("./fonts/Lato-Italic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/Lato-Medium.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("./fonts/Lato-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/Lato-Semibold.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("./fonts/Lato-SemiboldItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/Lato-Bold.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("./fonts/Lato-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("./fonts/Lato-Heavy.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("./fonts/Lato-HeavyItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("./fonts/Lato-Black.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("./fonts/Lato-BlackItalic.ttf") format("truetype"); }

:root {
  /* -- Base palette --
     The brand has TWO heroes: a near-black deep teal "tinta" and a warm
     amber "sol". Everything else is supporting. Keep the system tight. */

  /* Tinta — deep teal/green, the brand's anchor color */
  --tinta-950: #001a1a;   /* deepest, for splash & text on pure white */
  --tinta-900: #002222;   /* CORE — sampled from logo */
  --tinta-800: #0b3434;
  --tinta-700: #1a4848;
  --tinta-600: #2a5c5c;
  --tinta-500: #3f7373;
  --tinta-400: #6c9696;
  --tinta-300: #a3bdbd;
  --tinta-200: #d2dfdf;
  --tinta-100: #e8efef;
  --tinta-50:  #f3f7f7;

  /* Sol — warm amber, used for emphasis, growth, energy */
  --sol-900: #8a5a0d;
  --sol-800: #b07814;
  --sol-700: #d4951f;
  --sol-600: #eaa829;
  --sol-500: #f6b134;   /* CORE — sampled from logo arrow */
  --sol-400: #fac15c;
  --sol-300: #fdd388;
  --sol-200: #fee5b5;
  --sol-100: #fff3da;
  --sol-50:  #fffaee;

  /* Neutrals — warm-ish grays that play with both tinta and sol */
  --neutro-0:   #ffffff;
  --neutro-25:  #fbfbfa;
  --neutro-50:  #f6f6f4;
  --neutro-100: #efefec;
  --neutro-200: #e3e3df;
  --neutro-300: #cccac4;
  --neutro-400: #a4a29b;
  --neutro-500: #7a7872;
  --neutro-600: #555350;
  --neutro-700: #3a3936;
  --neutro-800: #232220;
  --neutro-900: #131312;

  /* Semantic — financial / ERP needs these clearly */
  --exito-500: #1f9d6a;   /* ingresos, success, paid */
  --exito-100: #def2e8;
  --exito-700: #14704a;

  --alerta-500: #e8843b;  /* warn, pendiente, low stock — distinct from sol */
  --alerta-100: #fbe3d0;
  --alerta-700: #a45316;

  --error-500: #d6443c;   /* error, vencido, rechazado */
  --error-100: #f6dad8;
  --error-700: #9b2620;

  --info-500: #3877c4;    /* informational, links in long copy */
  --info-100: #dbe7f6;
  --info-700: #244e85;

  /* -- Semantic role tokens (USE THESE in components) -- */

  /* Backgrounds */
  --bg-base:        var(--neutro-25);   /* page background */
  --bg-elevated:    var(--neutro-0);    /* cards, sheets */
  --bg-sunken:      var(--neutro-50);   /* inputs, code blocks */
  --bg-tinta:       var(--tinta-900);   /* dark surfaces, nav, hero */
  --bg-tinta-soft:  var(--tinta-50);    /* tinta tint surface */
  --bg-sol-soft:    var(--sol-100);     /* highlight surface */

  /* Foregrounds */
  --fg-1: var(--tinta-900);  /* primary text */
  --fg-2: var(--neutro-700); /* secondary text */
  --fg-3: var(--neutro-500); /* tertiary / muted */
  --fg-4: var(--neutro-400); /* placeholder */
  --fg-on-tinta:   #ffffff;
  --fg-on-tinta-2: rgba(255,255,255,0.72);
  --fg-on-tinta-3: rgba(255,255,255,0.52);
  --fg-on-sol:     var(--tinta-900);
  --fg-link:       var(--info-500);

  /* Borders / dividers */
  --linea-suave:   var(--neutro-200);
  --linea:         var(--neutro-300);
  --linea-fuerte:  var(--neutro-400);
  --linea-tinta:   var(--tinta-900);

  /* Accents */
  --acento:        var(--sol-500);
  --acento-press:  var(--sol-600);
  --acento-soft:   var(--sol-100);

  /* -- Type --------------------------------------------------- */
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — Lato carries weight beautifully; we lean light + bold.
     -lh / -tracking / -num are unitless typographic metrics → tagged @kind font. */
  --t-display-1-size: 72px;  --t-display-1-lh: 1.02; /* @kind font */ --t-display-1-tracking: -0.025em; /* @kind font */ --t-display-1-weight: 900;
  --t-display-2-size: 56px;  --t-display-2-lh: 1.04; /* @kind font */ --t-display-2-tracking: -0.022em; /* @kind font */ --t-display-2-weight: 900;
  --t-h1-size: 40px;         --t-h1-lh: 1.10; /* @kind font */ --t-h1-tracking: -0.018em; /* @kind font */ --t-h1-weight: 800;
  --t-h2-size: 30px;         --t-h2-lh: 1.18; /* @kind font */ --t-h2-tracking: -0.012em; /* @kind font */ --t-h2-weight: 800;
  --t-h3-size: 22px;         --t-h3-lh: 1.28; /* @kind font */ --t-h3-tracking: -0.006em; /* @kind font */ --t-h3-weight: 700;
  --t-h4-size: 18px;         --t-h4-lh: 1.34; /* @kind font */ --t-h4-tracking: -0.002em; /* @kind font */ --t-h4-weight: 700;
  --t-body-lg-size: 18px;    --t-body-lg-lh: 1.55; /* @kind font */ --t-body-lg-weight: 400;
  --t-body-size: 15px;       --t-body-lh: 1.55; /* @kind font */ --t-body-weight: 400;
  --t-body-sm-size: 13.5px;  --t-body-sm-lh: 1.50; /* @kind font */ --t-body-sm-weight: 400;
  --t-caption-size: 12px;    --t-caption-lh: 1.40; /* @kind font */ --t-caption-weight: 500;
  --t-overline-size: 11px;   --t-overline-lh: 1.30; /* @kind font */ --t-overline-tracking: 0.10em; /* @kind font */ --t-overline-weight: 700;
  --t-button-size: 14.5px;   --t-button-lh: 1; /* @kind font */ --t-button-tracking: 0; /* @kind font */ --t-button-weight: 700;
  --t-num-tabular: "tnum" 1, "lnum" 1; /* @kind font */

  /* -- Spacing (4-pt base) ----------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* -- Radii — soft but never pillowy. ERP feels orderly. ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* -- Shadows — single direction, low spread, gentle ------- */
  --shadow-xs: 0 1px 0 rgba(0, 34, 34, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 34, 34, 0.06), 0 1px 1px rgba(0, 34, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 34, 34, 0.06), 0 2px 4px rgba(0, 34, 34, 0.04);
  --shadow-lg: 0 12px 28px rgba(0, 34, 34, 0.10), 0 4px 8px rgba(0, 34, 34, 0.05);
  --shadow-xl: 0 24px 56px rgba(0, 34, 34, 0.16), 0 6px 14px rgba(0, 34, 34, 0.06);
  --shadow-focus: 0 0 0 3px rgba(246, 177, 52, 0.40);
  --shadow-focus-tinta: 0 0 0 3px rgba(0, 34, 34, 0.20);
  --shadow-inner: inset 0 1px 2px rgba(0, 34, 34, 0.06);

  /* -- Motion — quick, gentle, never bouncy (timing/easing → @kind other) -- */
  --ease-out:   cubic-bezier(0.20, 0.80, 0.30, 1.00); /* @kind other */
  --ease-in-out: cubic-bezier(0.60, 0.00, 0.30, 1.00); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 180ms; /* @kind other */
  --dur-3: 240ms; /* @kind other */
  --dur-4: 360ms; /* @kind other */
}

/* ============================================================
   Semantic typography classes — apply directly OR use as recipe
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-base);
       font-size: var(--t-body-size); line-height: var(--t-body-lh); }

.t-display-1 { font: var(--t-display-1-weight) var(--t-display-1-size)/var(--t-display-1-lh) var(--font-sans);
               letter-spacing: var(--t-display-1-tracking); }
.t-display-2 { font: var(--t-display-2-weight) var(--t-display-2-size)/var(--t-display-2-lh) var(--font-sans);
               letter-spacing: var(--t-display-2-tracking); }
.t-h1 { font: var(--t-h1-weight) var(--t-h1-size)/var(--t-h1-lh) var(--font-sans);
        letter-spacing: var(--t-h1-tracking); }
.t-h2 { font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-lh) var(--font-sans);
        letter-spacing: var(--t-h2-tracking); }
.t-h3 { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-lh) var(--font-sans);
        letter-spacing: var(--t-h3-tracking); }
.t-h4 { font: var(--t-h4-weight) var(--t-h4-size)/var(--t-h4-lh) var(--font-sans);
        letter-spacing: var(--t-h4-tracking); }
.t-body-lg { font: var(--t-body-lg-weight) var(--t-body-lg-size)/var(--t-body-lg-lh) var(--font-sans); }
.t-body    { font: var(--t-body-weight) var(--t-body-size)/var(--t-body-lh) var(--font-sans); }
.t-body-sm { font: var(--t-body-sm-weight) var(--t-body-sm-size)/var(--t-body-sm-lh) var(--font-sans); }
.t-caption { font: var(--t-caption-weight) var(--t-caption-size)/var(--t-caption-lh) var(--font-sans); }
.t-overline { font: var(--t-overline-weight) var(--t-overline-size)/var(--t-overline-lh) var(--font-sans);
              letter-spacing: var(--t-overline-tracking); text-transform: uppercase; }
.t-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* -- Element defaults so raw HTML looks right ---------------- */
h1 { font: var(--t-h1-weight) var(--t-h1-size)/var(--t-h1-lh) var(--font-sans);
     letter-spacing: var(--t-h1-tracking); color: var(--fg-1); margin: 0 0 var(--space-4); }
h2 { font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-lh) var(--font-sans);
     letter-spacing: var(--t-h2-tracking); color: var(--fg-1); margin: 0 0 var(--space-3); }
h3 { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-lh) var(--font-sans);
     letter-spacing: var(--t-h3-tracking); color: var(--fg-1); margin: 0 0 var(--space-3); }
h4 { font: var(--t-h4-weight) var(--t-h4-size)/var(--t-h4-lh) var(--font-sans);
     color: var(--fg-1); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-3); color: var(--fg-2); }
a  { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent;
     transition: border-color var(--dur-1) var(--ease-out); }
a:hover { border-bottom-color: currentColor; }
code, pre { font-family: var(--font-mono); font-size: 0.92em;
            background: var(--bg-sunken); border-radius: var(--r-xs);
            padding: 1px 6px; color: var(--fg-1); }
hr { border: 0; border-top: 1px solid var(--linea-suave); margin: var(--space-7) 0; }

::selection { background: var(--sol-200); color: var(--tinta-900); }

/* ============================================================
   PRODUCT chrome tokens — em.pren.do app
   The marketing brand (tinta + sol) lives on website / logo /
   collateral. Inside the app we use a NEUTRAL chrome built on
   theme-able tokens (--app-primary / --app-accent) so each
   client can apply their own palette without rewriting components.
   ============================================================ */
:root {
  /* ---- App chrome — neutral slate ---- */
  --app-nav-bg:        #2b3338;
  --app-nav-bg-hover:  #353d43;
  --app-nav-fg:        #ffffff;
  --app-nav-fg-2:      rgba(255,255,255,0.72);

  /* ---- THEME API (override these per client) ----
     Defaults are neutral cool grays. A client picks their palette
     by redeclaring just these two in a wrapper :root or [data-theme]. */
  --app-primary:        #4a5258;  /* primary action buttons   (was burgundy)  */
  --app-primary-hover:  #3a4046;
  --app-primary-fg:     #ffffff;
  --app-accent:         #4a5258;  /* section titles, links    (was teal)      */
  --app-accent-soft:    #eef0f2;
  --app-accent-hover:   #3a4046;

  /* ---- Surfaces ---- */
  --app-page-bg:        #f4f4f4;
  --app-card-bg:        #ffffff;
  --app-row-hover:      #f5f5f5;
  --app-row-zebra:      #fafafa;
  --app-divider:        #e5e5e5;
  --app-divider-strong: #d6d6d6;
  --app-text:           #212529;
  --app-text-2:         #6c757d;
  --app-text-3:         #95989b;

  /* ---- Status pills — muted, neutral-leaning ---- */
  --st-draft-bg:    #7497b3;   --st-draft-fg:    #ffffff;  /* Borrador  (muted blue) */
  --st-process-bg:  #6b8d76;   --st-process-fg:  #ffffff;  /* En proceso de pago (muted moss) */
  --st-paid-bg:     #4f7e7c;   --st-paid-fg:     #ffffff;  /* Pagada (muted teal) */
  --st-posted-bg:   #cfcfcf;   --st-posted-fg:   #2a2a2a;  /* Registrado (gray) */
  --st-partial-bg:  #b3c0c9;   --st-partial-fg:  #2a2a2a;  /* Pagado parcialmente */
  --st-late-fg:     #b8554f;                                /* "Hace 11 días" — muted red */

  --app-shadow-card: 0 1px 2px rgba(0,0,0,0.06);
  --app-radius:      4px;
}

/* ---- Sample preset themes — apply to a wrapper to re-skin the whole app ---- */
[data-theme="tinta"] {       /* em.pren.do brand colors */
  --app-primary: var(--tinta-900);  --app-primary-hover: var(--tinta-800);
  --app-accent:  var(--tinta-900);  --app-accent-hover:  var(--tinta-800);
}
[data-theme="sol"] {         /* amber primary */
  --app-primary: var(--sol-700);    --app-primary-hover: var(--sol-800);
  --app-primary-fg: #ffffff;
  --app-accent:  var(--sol-800);
}
[data-theme="slate"] {       /* default neutral (already the root) */
  --app-primary: #4a5258;  --app-accent: #4a5258;
}
[data-theme="ocean"] {       /* muted blue */
  --app-primary: #355c7d;  --app-primary-hover: #2a4a66;
  --app-accent:  #355c7d;
}
[data-theme="forest"] {      /* muted green */
  --app-primary: #4d6e54;  --app-primary-hover: #3d5a43;
  --app-accent:  #4d6e54;
}