/* =====================================================================
   Aduanas360 — Design Tokens (capa canónica)
   Adaptado de content/design-system/colors_and_type.css.
   Solo DEFINE variables + fuentes self-hosted: es una capa INERTE
   (no aplica estilos por sí sola). El re-mapeo a Bootstrap / a360
   vive en ds-bridge.css. Fuente de verdad de la marca.
   ===================================================================== */

/* Montserrat — self-hosted (.ttf en static/fonts/) */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Montserrat-Thin.da2373e271b7.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/Montserrat-ThinItalic.8a84aafae4cb.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Montserrat-ExtraLight.985b2147a6b9.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/Montserrat-ExtraLightItalic.2ea0576ae2d6.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Montserrat-Light.5cbf5cdcf7ec.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Montserrat-LightItalic.4eacf0be3abf.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-Regular.203d753a8055.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-Italic.ba6062606d5a.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-Medium.9d496514aedf.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-MediumItalic.426a2f39048d.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Montserrat-SemiBold.c1bd726715a6.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/Montserrat-SemiBoldItalic.7e5c023c68d9.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Montserrat-Bold.c300fff4e4ae.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/Montserrat-BoldItalic.4a2d6e65e13b.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Montserrat-ExtraBold.8a50619755ab.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/Montserrat-ExtraBoldItalic.1e928a19babc.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Montserrat-Black.d414a87f1942.ttf") format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/Montserrat-BlackItalic.e11421af6f75.ttf") format('truetype'); }

:root {
  /* ---------- Brand colors ---------------------------------------- */
  --brand-navy:        #003366;  /* Azul Corporativo — primary */
  --brand-navy-900:    #00264d;
  --brand-navy-800:    #002d5c;
  --brand-navy-700:    #003366;  /* base */
  --brand-navy-600:    #0a4482;
  --brand-navy-500:    #1e5aa0;
  --brand-navy-400:    #3d7bbf;
  --brand-navy-300:    #7aa6d8;
  --brand-navy-200:    #b8cfe8;
  --brand-navy-100:    #dce7f3;
  --brand-navy-50:     #eef3f9;

  /* Accent — warm amber/orange for CTAs and alerts. */
  --brand-amber:       #F08A1C;   /* CTA amber */
  --brand-amber-600:   #d97309;
  --brand-amber-500:   #F08A1C;
  --brand-amber-400:   #f8a44d;
  --brand-amber-100:   #fde8cf;
  --brand-amber-50:    #fff5e6;

  --brand-orange:      #fd7e14;   /* Alerta (spec) */

  /* ---------- Semantic / status colors ---------------------------- */
  --success:           #28a745;
  --success-50:        #e8f6eb;
  --success-600:       #1e8535;

  --warning:           #fd7e14;   /* same as brand-orange */
  --warning-50:        #fff1e2;
  --warning-600:       #d96905;

  --danger:            #dc2f3c;
  --danger-50:         #fde8ea;
  --danger-600:        #b91f2b;

  --info:              #1e5aa0;
  --info-50:           #e6eef7;

  /* ---------- Neutrals -------------------------------------------- */
  --ink-900:           #111418;   /* near-black, rarely used */
  --ink-800:           #1f242b;
  --ink-700:           #333333;   /* spec: Gris Oscuro — body text */
  --ink-600:           #4a5159;
  --ink-500:           #6b727b;
  --ink-400:           #9097a1;
  --ink-300:           #c2c7cf;
  --ink-200:           #e3e6eb;
  --ink-100:           #eef0f4;
  --ink-50:            #f8f9fa;   /* spec: Gris Claro — bg fills */
  --paper:             #ffffff;

  /* ---------- Foreground roles ------------------------------------ */
  --fg-1:              var(--ink-800);    /* headlines on light */
  --fg-2:              var(--ink-700);    /* body */
  --fg-3:              var(--ink-500);    /* secondary / meta */
  --fg-4:              var(--ink-400);    /* disabled / placeholder */
  --fg-on-brand:       #ffffff;

  /* ---------- Background roles ------------------------------------ */
  --bg-1:              var(--paper);      /* page */
  --bg-2:              var(--ink-50);     /* subtle section */
  --bg-3:              var(--ink-100);    /* deeper panel */
  --bg-brand:          var(--brand-navy);
  --bg-brand-soft:     var(--brand-navy-50);

  /* ---------- Borders --------------------------------------------- */
  --border-1:          var(--ink-200);    /* default hairline */
  --border-2:          var(--ink-300);    /* stronger */
  --border-strong:     var(--ink-700);
  --border-brand:      var(--brand-navy);

  /* ---------- Typography ------------------------------------------ */
  --font-display:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:         'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px, with rem-friendly line-heights) */
  --fs-display-xl:     48px;
  --fs-display-lg:     40px;
  --fs-h1:             32px;
  --fs-h2:             24px;
  --fs-h3:             20px;
  --fs-lg:             18px;
  --fs-body:           16px;
  --fs-sm:             14px;
  --fs-xs:             12px;

  --lh-tight:          1.15;
  --lh-snug:           1.3;
  --lh-normal:         1.5;
  --lh-relaxed:        1.65;

  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;

  --letter-tight:      -0.02em;
  --letter-normal:     0;
  --letter-wide:       0.04em;
  --letter-caps:       0.08em;

  /* ---------- 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;

  /* ---------- Radii ----------------------------------------------- */
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         6px;
  --radius-lg:         10px;
  --radius-xl:         16px;
  --radius-pill:       999px;

  /* ---------- Shadows --------------------------------------------- */
  --shadow-xs:         0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:         0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md:         0 4px 6px -1px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg:         0 10px 20px -4px rgba(16, 24, 40, 0.10), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
  --shadow-xl:         0 20px 32px -8px rgba(0, 51, 102, 0.18), 0 8px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-focus:      0 0 0 3px rgba(0, 51, 102, 0.22);
  --shadow-focus-amber:0 0 0 3px rgba(240, 138, 28, 0.28);

  /* ---------- Motion ---------------------------------------------- */
  --ease-out:          cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:          120ms;
  --dur-base:          180ms;
  --dur-slow:          280ms;

  /* ---------- Layout ---------------------------------------------- */
  --container-sm:      640px;
  --container-md:      960px;
  --container-lg:      1200px;
  --container-xl:      1360px;
}