/* =========================================================================
   TerraCore Design Tokens
   Lúmina W · TerraCore — Plataforma de gestión agroindustrial
   --------------------------------------------------------------------------
   Canonical brand values supplied by the team:
     Primario:    #1B4332 (verde bosque)
     Acento:      #D97706 (ámbar)
     Fondo:       #F9F7F4
     Texto:       #0F3D2A
     Sidebar:     #0D2A1F
     Éxito:       #4CAF50
     Advertencia: #FFC107
     Error:       #F44336
     Info:        #2196F3
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* JetBrains Mono kept from Google Fonts (no brand file uploaded) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ==================================================================
     1. COLORS — raw scale
     ================================================================== */

  /* Brand · Forest green (anchored on #1B4332) */
  --tc-green-950: #061812;
  --tc-green-900: #0D2A1F;   /* Sidebar */
  --tc-green-800: #0F3D2A;   /* Texto principal */
  --tc-green-700: #1B4332;   /* PRIMARIO */
  --tc-green-600: #285A44;   /* hover de primario */
  --tc-green-500: #3A7556;
  --tc-green-400: #5C9A78;
  --tc-green-300: #8FBDA3;
  --tc-green-200: #BFD9CB;
  --tc-green-100: #DCEBE2;
  --tc-green-50:  #EEF5F1;

  /* Brand · Ámbar (anchored on #D97706) */
  --tc-amber-900: #6B3705;
  --tc-amber-800: #92500B;
  --tc-amber-700: #B36110;
  --tc-amber-600: #D97706;   /* ACENTO */
  --tc-amber-500: #ED8B1F;
  --tc-amber-400: #F4A752;
  --tc-amber-300: #F9C387;
  --tc-amber-200: #FCDDB4;
  --tc-amber-100: #FDEBD0;
  --tc-amber-50:  #FEF6E8;

  /* Semantic — Éxito (#4CAF50) */
  --tc-success-900: #1B5E20;
  --tc-success-700: #2E7D32;
  --tc-success-500: #4CAF50;   /* ÉXITO */
  --tc-success-300: #A5D6A7;
  --tc-success-100: #E8F5E9;

  /* Semantic — Advertencia (#FFC107) */
  --tc-warning-900: #7A4F01;
  --tc-warning-700: #B7791F;
  --tc-warning-500: #FFC107;   /* ADVERTENCIA */
  --tc-warning-300: #FFE082;
  --tc-warning-100: #FFF8E1;

  /* Semantic — Error (#F44336) */
  --tc-error-900: #7F1D1D;
  --tc-error-700: #C62828;
  --tc-error-500: #F44336;     /* ERROR */
  --tc-error-300: #EF9A9A;
  --tc-error-100: #FFEBEE;

  /* Semantic — Info (#2196F3) */
  --tc-info-900: #0D47A1;
  --tc-info-700: #1565C0;
  --tc-info-500: #2196F3;      /* INFO */
  --tc-info-300: #90CAF9;
  --tc-info-100: #E3F2FD;

  /* Neutrals — warm gray, anchored on #F9F7F4 */
  --tc-neutral-950: #0E1411;
  --tc-neutral-900: #1A1F1B;
  --tc-neutral-800: #2A2F2B;
  --tc-neutral-700: #3F4541;
  --tc-neutral-600: #5A615C;
  --tc-neutral-500: #7A8079;
  --tc-neutral-400: #A6ACA6;
  --tc-neutral-300: #CFD2CC;
  --tc-neutral-200: #E5E7E1;
  --tc-neutral-150: #EFEFEA;
  --tc-neutral-100: #F4F2EE;
  --tc-neutral-50:  #F9F7F4;     /* FONDO */
  --tc-white:       #FFFFFF;

  /* ==================================================================
     1b. COLORS — semantic / role tokens (use these in components)
     ================================================================== */
  --color-primary:        #1B4332;
  --color-primary-hover:  #285A44;
  --color-primary-active: #0F3D2A;
  --color-primary-fg:     #FFFFFF;

  --color-accent:         #D97706;
  --color-accent-hover:   #B36110;
  --color-accent-active:  #92500B;
  --color-accent-fg:      #FFFFFF;

  --color-bg:             #F9F7F4;
  --color-surface:        #FFFFFF;
  --color-surface-sunken: #F4F2EE;
  --color-sidebar:        #0D2A1F;
  --color-sidebar-active: rgba(217, 119, 6, 0.16);
  --color-sidebar-fg:     rgba(255, 255, 255, 0.92);
  --color-sidebar-fg-muted: rgba(255, 255, 255, 0.62);

  --color-text:           #0F3D2A;
  --color-text-secondary: #5A615C;
  --color-text-muted:     #7A8079;
  --color-text-on-dark:   #FFFFFF;
  --color-text-link:      #D97706;
  --color-text-link-hover:#B36110;

  --color-border:         #E5E7E1;
  --color-border-strong:  #CFD2CC;
  --color-ring:           rgba(27, 67, 50, 0.22);

  --color-success:        #4CAF50;
  --color-success-bg:     #E8F5E9;
  --color-success-border: #A5D6A7;
  --color-success-fg:     #1B5E20;

  --color-warning:        #FFC107;
  --color-warning-bg:     #FFF8E1;
  --color-warning-border: #FFE082;
  --color-warning-fg:     #7A4F01;

  --color-error:          #F44336;
  --color-error-bg:        #FFEBEE;
  --color-error-border:   #EF9A9A;
  --color-error-fg:       #7F1D1D;

  --color-info:           #2196F3;
  --color-info-bg:        #E3F2FD;
  --color-info-border:    #90CAF9;
  --color-info-fg:        #0D47A1;

  /* Backwards-compatible aliases used elsewhere in this kit */
  --tc-bg-app:        var(--color-bg);
  --tc-bg-surface:    var(--color-surface);
  --tc-bg-sunken:     var(--color-surface-sunken);
  --tc-bg-sidebar:    var(--color-sidebar);
  --tc-bg-sidebar-active: var(--color-sidebar-active);
  --tc-fg-primary:    var(--color-text);
  --tc-fg-secondary:  var(--color-text-secondary);
  --tc-fg-muted:      var(--color-text-muted);
  --tc-fg-on-dark:    var(--color-text-on-dark);
  --tc-fg-on-dark-muted: var(--color-sidebar-fg-muted);
  --tc-fg-link:       var(--color-text-link);
  --tc-fg-link-hover: var(--color-text-link-hover);
  --tc-border-subtle: var(--color-border);
  --tc-border-default: var(--color-border-strong);
  --tc-ring-focus:    var(--color-ring);
  --tc-accent:        var(--color-accent);
  --tc-accent-hover:  var(--color-accent-hover);
  --tc-primary:       var(--color-primary);
  --tc-primary-hover: var(--color-primary-hover);
  --tc-status-ok-bg:      var(--color-success-bg);
  --tc-status-ok-fg:      var(--color-success-fg);
  --tc-status-ok-border:  var(--color-success-border);
  --tc-status-warn-bg:     var(--color-warning-bg);
  --tc-status-warn-fg:     var(--color-warning-fg);
  --tc-status-warn-border: var(--color-warning-border);
  --tc-status-bad-bg:      var(--color-error-bg);
  --tc-status-bad-fg:      var(--color-error-fg);
  --tc-status-bad-border:  var(--color-error-border);
  --tc-status-info-bg:     var(--color-info-bg);
  --tc-status-info-fg:     var(--color-info-fg);
  --tc-status-info-border: var(--color-info-border);

  /* ==================================================================
     3. TYPOGRAPHY
     ================================================================== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --tc-font-sans: var(--font-sans);
  --tc-font-mono: var(--font-mono);
  --tc-font-display: var(--font-display);

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  --tc-weight-regular:  var(--weight-regular);
  --tc-weight-medium:   var(--weight-medium);
  --tc-weight-semibold: var(--weight-semibold);
  --tc-weight-bold:     var(--weight-bold);

  /* Type scale (base 15px) */
  --text-2xs:  11px;  --text-2xs-lh: 14px;
  --text-xs:   12px;  --text-xs-lh:  16px;
  --text-sm:   13px;  --text-sm-lh:  18px;
  --text-md:   14px;  --text-md-lh:  20px;
  --text-base: 15px;  --text-base-lh:22px;
  --text-lg:   17px;  --text-lg-lh:  24px;
  --text-xl:   20px;  --text-xl-lh:  28px;
  --text-2xl:  24px;  --text-2xl-lh: 32px;
  --text-3xl:  30px;  --text-3xl-lh: 38px;
  --text-4xl:  36px;  --text-4xl-lh: 44px;
  --text-display: 56px; --text-display-lh: 60px;

  --tc-text-2xs: var(--text-2xs); --tc-text-2xs-lh: var(--text-2xs-lh);
  --tc-text-xs:  var(--text-xs);  --tc-text-xs-lh:  var(--text-xs-lh);
  --tc-text-sm:  var(--text-sm);  --tc-text-sm-lh:  var(--text-sm-lh);
  --tc-text-md:  var(--text-md);  --tc-text-md-lh:  var(--text-md-lh);
  --tc-text-base:var(--text-base);--tc-text-base-lh:var(--text-base-lh);
  --tc-text-lg:  var(--text-lg);  --tc-text-lg-lh:  var(--text-lg-lh);
  --tc-text-xl:  var(--text-xl);  --tc-text-xl-lh:  var(--text-xl-lh);
  --tc-text-2xl: var(--text-2xl); --tc-text-2xl-lh: var(--text-2xl-lh);
  --tc-text-3xl: var(--text-3xl); --tc-text-3xl-lh: var(--text-3xl-lh);
  --tc-text-4xl: var(--text-4xl); --tc-text-4xl-lh: var(--text-4xl-lh);
  --tc-text-display: var(--text-display); --tc-text-display-lh: var(--text-display-lh);

  /* Tracking */
  --tracking-eyebrow: 0.08em;
  --tracking-tight:  -0.01em;
  --tracking-display:-0.02em;
  --tc-tracking-eyebrow: var(--tracking-eyebrow);
  --tc-tracking-tight:   var(--tracking-tight);
  --tc-tracking-display: var(--tracking-display);

  /* ==================================================================
     4. SPACING — 4px base
     ================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --tc-space-0:  var(--space-0);
  --tc-space-1:  var(--space-1);
  --tc-space-2:  var(--space-2);
  --tc-space-3:  var(--space-3);
  --tc-space-4:  var(--space-4);
  --tc-space-5:  var(--space-5);
  --tc-space-6:  var(--space-6);
  --tc-space-8:  var(--space-8);
  --tc-space-10: var(--space-10);
  --tc-space-12: var(--space-12);
  --tc-space-16: var(--space-16);
  --tc-space-20: var(--space-20);

  /* ==================================================================
     5. BORDER RADIUS
     ================================================================== */
  --radius-none: 0;
  --radius-xs:   4px;   /* chips, table-cell badges */
  --radius-sm:   6px;   /* inputs, small buttons */
  --radius-md:   8px;   /* default control */
  --radius-lg:   10px;  /* cards, KPI tiles */
  --radius-xl:   14px;  /* dialogs, sidebar logo tile */
  --radius-2xl:  20px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --tc-radius-xs:   var(--radius-xs);
  --tc-radius-sm:   var(--radius-sm);
  --tc-radius-md:   var(--radius-md);
  --tc-radius-lg:   var(--radius-lg);
  --tc-radius-xl:   var(--radius-xl);
  --tc-radius-2xl:  var(--radius-2xl);
  --tc-radius-pill: var(--radius-pill);

  /* ==================================================================
     6. SHADOWS — green-tinted, low-contrast (agro-paper feel)
     ================================================================== */
  --shadow-xs:    0 1px 2px rgba(13, 42, 31, 0.04);
  --shadow-sm:    0 1px 3px rgba(13, 42, 31, 0.06), 0 1px 2px rgba(13, 42, 31, 0.04);
  --shadow-md:    0 4px 12px rgba(13, 42, 31, 0.08), 0 2px 4px rgba(13, 42, 31, 0.04);
  --shadow-lg:    0 12px 32px rgba(13, 42, 31, 0.10), 0 4px 8px rgba(13, 42, 31, 0.04);
  --shadow-xl:    0 24px 64px rgba(13, 42, 31, 0.16);
  --shadow-inner: inset 0 1px 2px rgba(13, 42, 31, 0.06);
  --shadow-focus: 0 0 0 3px var(--color-ring);

  --tc-shadow-xs:    var(--shadow-xs);
  --tc-shadow-sm:    var(--shadow-sm);
  --tc-shadow-md:    var(--shadow-md);
  --tc-shadow-lg:    var(--shadow-lg);
  --tc-shadow-xl:    var(--shadow-xl);
  --tc-shadow-focus: var(--shadow-focus);

  /* ==================================================================
     MOTION
     ================================================================== */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0.1, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);

  --tc-duration-fast: var(--duration-fast);
  --tc-duration-base: var(--duration-base);
  --tc-duration-slow: var(--duration-slow);
  --tc-ease-standard:   var(--ease-standard);
  --tc-ease-emphasized: var(--ease-emphasized);

  /* ==================================================================
     LAYOUT
     ================================================================== */
  --tc-sidebar-width: 240px;
  --tc-sidebar-width-collapsed: 64px;
  --tc-topbar-height: 56px;
  --tc-content-max: 1280px;
  --tc-content-pad: 32px;
}

/* =========================================================================
   SEMANTIC HTML PRIMITIVES
   Apply via .tc-root on body, then use the named classes inside.
   ========================================================================= */

.tc-root,
body.tc-root {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tc-h1, h1.tc {
  font-family: var(--font-display);
  font-size: var(--text-3xl); line-height: var(--text-3xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.tc-h2, h2.tc {
  font-size: var(--text-2xl); line-height: var(--text-2xl-lh);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.tc-h3, h3.tc {
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.tc-h4, h4.tc {
  font-size: var(--text-md); line-height: var(--text-md-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.tc-eyebrow {
  font-size: var(--text-2xs); line-height: var(--text-2xs-lh);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tc-p, p.tc {
  font-size: var(--text-md); line-height: var(--text-md-lh);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

.tc-lead {
  font-size: var(--text-base); line-height: var(--text-base-lh);
  color: var(--color-text-secondary);
}

.tc-mono, code.tc {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tc-num { font-variant-numeric: tabular-nums; }

.tc-kpi-value {
  font-size: var(--text-3xl); line-height: 1.1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.tc-link {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.tc-link:hover { color: var(--color-text-link-hover); }