/* ==========================================================================
   Dragon Global Trade — tokens de diseño  ·  Identidad PREMIUM "Jade y Sello"
   Capas:  --ref-*  (valores crudos)  →  --sys-*  (roles semánticos, cambian por tema)
           →  --c-*   (decisiones de componente).
   Temas:  claro (por defecto) · oscuro ([data-theme="dark"] o preferencia del sistema)
   Densidad: [data-density="comfortable|compact"]   Idioma: :lang(zh) ajusta tipografía.
   Marca PROVISIONAL: pendiente de ratificación del responsable (ver supuestos S-001).
   Contrastes medidos con aidlc-docs/herramientas-qa/contrast.js (resultado en DESIGN-SYSTEM.md).
   ========================================================================== */

:root {
  /* ---------- 1. REFERENCIA: color ---------- */
  /* Jade (primario) — jade imperial y esmeralda colombiana comparten familia */
  --ref-jade-50:  #E8F4F0;
  --ref-jade-100: #CDE8DF;
  --ref-jade-200: #A3D3C4;
  --ref-jade-300: #6DB8A2;
  --ref-jade-400: #3D9A82;
  --ref-jade-500: #1F7F69;
  --ref-jade-600: #0F6654;
  --ref-jade-700: #0B5244;
  --ref-jade-800: #093F35;
  --ref-jade-900: #062B25;
  --ref-jade-950: #031A16;
  /* Tinta (neutros con matiz verde-gris) */
  --ref-ink-0:   #FFFFFF;
  --ref-ink-25:  #F7F9F8;
  --ref-ink-50:  #F1F4F3;
  --ref-ink-100: #E6EBE9;
  --ref-ink-200: #D3DAD7;
  --ref-ink-300: #B5BFBB;
  --ref-ink-400: #8E9B96;
  --ref-ink-500: #6B7873;
  --ref-ink-600: #52605B;
  --ref-ink-700: #3C4844;
  --ref-ink-800: #27312E;
  --ref-ink-850: #1D2623;
  --ref-ink-900: #151C1A;
  --ref-ink-950: #0D1210;
  /* Sello (cinabrio): SOLO marca/logotipo. Nunca estado ni acción. */
  --ref-seal-500: #C8381F;
  --ref-seal-600: #A82D17;
  /* Oro (acento cálido), hoja (éxito), carmín (peligro), acero (info) */
  --ref-gold-100: #FBEBC2;
  --ref-gold-300: #E6B94D;
  --ref-gold-600: #8F5F00;
  --ref-gold-800: #5C3C00;
  --ref-leaf-100: #DCEFD0;
  --ref-leaf-300: #86C46A;
  --ref-leaf-700: #2B6A1B;
  --ref-leaf-900: #17380E;
  --ref-crimson-100: #FBE1DE;
  --ref-crimson-300: #FFB4AB;
  --ref-crimson-700: #AE241C;
  --ref-crimson-900: #4A1511;
  --ref-steel-100: #DCEBF7;
  --ref-steel-300: #9CC8F0;
  --ref-steel-700: #1D5A8B;
  --ref-steel-900: #14304A;

  /* ---------- 1. REFERENCIA: tipografía ---------- */
  /* Pila de sistema: no se descarga ninguna fuente. CJK real vía PingFang SC / YaHei / Noto Sans SC. */
  --ref-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC",
                   "Source Han Sans SC", Arial, sans-serif;
  --ref-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif",
                      "Source Serif 4", Georgia, "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", serif;
  --ref-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* Escala (rem sobre base 16 px) — roles inspirados en M3 */
  --ref-size-11: 0.6875rem;
  --ref-size-12: 0.75rem;
  --ref-size-13: 0.8125rem;
  --ref-size-14: 0.875rem;
  --ref-size-16: 1rem;
  --ref-size-18: 1.125rem;
  --ref-size-20: 1.25rem;
  --ref-size-24: 1.5rem;
  --ref-size-28: 1.75rem;
  --ref-size-32: 2rem;
  --ref-size-40: 2.5rem;
  --ref-size-56: 3.5rem;

  /* ---------- 1. REFERENCIA: espacio, radios, movimiento ---------- */
  --ref-space-0: 0;
  --ref-space-1: 0.125rem;   /* 2  */
  --ref-space-2: 0.25rem;    /* 4  */
  --ref-space-3: 0.5rem;     /* 8  */
  --ref-space-4: 0.75rem;    /* 12 */
  --ref-space-5: 1rem;       /* 16 */
  --ref-space-6: 1.25rem;    /* 20 */
  --ref-space-7: 1.5rem;     /* 24 */
  --ref-space-8: 2rem;       /* 32 */
  --ref-space-9: 2.5rem;     /* 40 */
  --ref-space-10: 3rem;      /* 48 */
  --ref-space-11: 4rem;      /* 64 */

  --ref-radius-xs: 4px;
  --ref-radius-sm: 8px;
  --ref-radius-md: 12px;
  --ref-radius-lg: 16px;
  --ref-radius-xl: 24px;
  --ref-radius-pill: 999px;

  --ref-dur-instant: 80ms;
  --ref-dur-fast: 150ms;
  /* Escala ÚNICA del valor de una ficha de cifra (ui.kpi y ui.statTile): 26–30 px. Las cifras de dinero la reducen por contenedor (variante --money). */
  --stat-size: clamp(1.625rem, 1.45rem + .55vw, 1.875rem);
  --ref-dur-base: 240ms;
  --ref-dur-slow: 360ms;
  --ref-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ref-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ref-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* ---------- 2. SISTEMA: tema CLARO (por defecto) ---------- */
  color-scheme: light;
  --sys-bg:            var(--ref-ink-25);
  --sys-surface:       var(--ref-ink-0);
  --sys-surface-1:     var(--ref-ink-50);
  --sys-surface-2:     var(--ref-ink-100);
  --sys-surface-3:     var(--ref-ink-200);
  --sys-surface-inverse: var(--ref-ink-900);
  --sys-on-surface-inverse: var(--ref-ink-50);
  --sys-text:          var(--ref-ink-900);
  --sys-text-2:        var(--ref-ink-600);
  --sys-text-3:        #5A6762;                 /* >= 4.5:1 sobre surface-2 (medido) */
  --sys-text-disabled: var(--ref-ink-400);      /* exento WCAG 1.4.3 (componente inactivo) */
  --sys-border:        var(--ref-ink-200);      /* divisores decorativos */
  --sys-border-strong: var(--ref-ink-500);      /* bordes de control: >= 3:1 (WCAG 1.4.11) */

  --sys-primary:       var(--ref-jade-600);
  --sys-primary-hover: var(--ref-jade-700);
  --sys-on-primary:    #FFFFFF;
  --sys-primary-container:    var(--ref-jade-100);
  --sys-on-primary-container: var(--ref-jade-900);
  --sys-link:          var(--ref-jade-700);

  --sys-accent:        var(--ref-gold-600);
  --sys-accent-container: var(--ref-gold-100);
  --sys-on-accent-container: var(--ref-gold-800);

  --sys-success:       var(--ref-leaf-700);
  --sys-success-container: var(--ref-leaf-100);
  --sys-on-success-container: var(--ref-leaf-900);
  --sys-warning:       var(--ref-gold-600);
  --sys-warning-container: var(--ref-gold-100);
  --sys-on-warning-container: var(--ref-gold-800);
  --sys-danger:        var(--ref-crimson-700);
  --sys-danger-container: var(--ref-crimson-100);
  --sys-on-danger-container: #5E100B;
  --sys-on-danger:     #FFFFFF;
  --sys-info:          var(--ref-steel-700);
  --sys-info-container: var(--ref-steel-100);
  --sys-on-info-container: #0E2F4A;

  --sys-focus:         var(--ref-ink-900);
  --sys-scrim:         rgba(13, 18, 16, 0.48);
  --sys-seal:          var(--ref-seal-500);

  /* Capas de estado (M3: hover 8 %, focus/pressed 10 %) */
  --sys-state-hover:   0.08;
  --sys-state-press:   0.12;
  --sys-state-layer:   var(--ref-ink-900);

  /* Visualización de datos (cada serie >= 3:1 sobre surface; ver medición) */
  --viz-1: #0F6654; --viz-2: #8F5F00; --viz-3: #B0301F;
  --viz-4: #2A62A0; --viz-5: #7A4A91; --viz-6: #566660;
  --viz-grid: var(--ref-ink-200);

  /* Elevación (claro: sombras) */
  --sys-elev-1: 0 1px 2px rgba(13,18,16,.07), 0 1px 1px rgba(13,18,16,.04);
  --sys-elev-2: 0 2px 8px rgba(13,18,16,.09), 0 1px 2px rgba(13,18,16,.06);
  --sys-elev-3: 0 8px 24px rgba(13,18,16,.14), 0 2px 6px rgba(13,18,16,.08);
  --sys-elev-4: 0 20px 48px rgba(13,18,16,.22), 0 4px 12px rgba(13,18,16,.10);
  /* Material translúcido SOLO para barras (Apple HIG: materiales donde aporten contexto) */
  --sys-bar-bg: rgba(255,255,255,.82);
  --sys-bar-border: rgba(13,18,16,.10);

  /* Tipografía por rol */
  --font-sans: var(--ref-font-sans);
  --font-display: var(--ref-font-display);
  --font-mono: var(--ref-font-mono);

  /* ---------- 3. COMPONENTE (dependen de densidad) ---------- */
  --tap: 44px;                         /* objetivo táctil mínimo (HIG 44 pt) */
  --ctrl-h: 44px;                      /* alto de botón/campo */
  --ctrl-h-lg: 52px;
  --ctrl-pad-x: var(--ref-space-5);
  --row-h: 56px;                       /* alto de fila de tabla */
  --cell-pad-y: var(--ref-space-4);
  --card-pad: var(--ref-space-6);
  --gap: var(--ref-space-5);
  --section-gap: var(--ref-space-8);
  --page-pad: var(--ref-space-5);      /* gutter lateral (16) en compacto */

  --c-radius-control: var(--ref-radius-md);
  --c-radius-card: var(--ref-radius-lg);
  --c-radius-sheet: var(--ref-radius-xl);
  --c-border-w: 1px;

  --nav-w: 264px;
  --rail-w: 96px; /* ancho para etiquetas largas pt/fr (H-I18N-04) */
  --topbar-h: 64px;
  --tabbar-h: 68px;
  --content-max: 1320px;

  --dur-hover: var(--ref-dur-fast);
  --dur-enter: var(--ref-dur-base);
  --ease-enter: var(--ref-ease-decel);
  --ease-standard: var(--ref-ease-standard);

  --z-nav: 20; --z-topbar: 30; --z-popover: 60; --z-sheet: 70; --z-modal: 80; --z-toast: 90; --z-cmdk: 100;
}

/* ---------- Tema OSCURO ---------- */
:root[data-theme="dark"] { color-scheme: dark;
  --sys-bg:            #0B0F0E;
  --sys-surface:       #131A18;
  --sys-surface-1:     #19221F;
  --sys-surface-2:     #202B28;
  --sys-surface-3:     #2A3834;
  --sys-surface-inverse: var(--ref-ink-100);
  --sys-on-surface-inverse: var(--ref-ink-900);
  --sys-text:          #EAF0EE;
  --sys-text-2:        #B7C3BE;
  --sys-text-3:        #98A7A1;
  --sys-text-disabled: #6B7873;
  --sys-border:        #2C3935;
  --sys-border-strong: #70807A;

  --sys-primary:       var(--ref-jade-300);
  --sys-primary-hover: var(--ref-jade-200);
  --sys-on-primary:    var(--ref-jade-950);
  --sys-primary-container:    var(--ref-jade-800);
  --sys-on-primary-container: var(--ref-jade-100);
  --sys-link:          var(--ref-jade-200);

  --sys-accent:        var(--ref-gold-300);
  --sys-accent-container: #3A2A07;
  --sys-on-accent-container: #F7DC9B;

  --sys-success:       var(--ref-leaf-300);
  --sys-success-container: #17301A;
  --sys-on-success-container: #C5E8B3;
  --sys-warning:       var(--ref-gold-300);
  --sys-warning-container: #3A2A07;
  --sys-on-warning-container: #F7DC9B;
  --sys-danger:        var(--ref-crimson-300);
  --sys-danger-container: var(--ref-crimson-900);
  --sys-on-danger-container: #FFD9D4;
  --sys-on-danger:     #3B0A07;
  --sys-info:          var(--ref-steel-300);
  --sys-info-container: var(--ref-steel-900);
  --sys-on-info-container: #D2E7F9;

  --sys-focus:         #F1F6F4;
  --sys-scrim:         rgba(0, 0, 0, 0.62);
  --sys-seal:          #E2543A;
  --sys-state-layer:   #FFFFFF;

  --viz-1: #6DB8A2; --viz-2: #E0B04A; --viz-3: #F08A7A;
  --viz-4: #7FB2E5; --viz-5: #C39BD3; --viz-6: #A3B1AB;
  --viz-grid: #2C3935;

  /* Oscuro: la elevación se expresa con superficie tonal + sombra profunda */
  --sys-elev-1: 0 1px 2px rgba(0,0,0,.5);
  --sys-elev-2: 0 2px 8px rgba(0,0,0,.5);
  --sys-elev-3: 0 8px 24px rgba(0,0,0,.6);
  --sys-elev-4: 0 20px 48px rgba(0,0,0,.7);
  --sys-bar-bg: rgba(19,26,24,.80);
  --sys-bar-border: rgba(255,255,255,.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark;
    --sys-bg: #0B0F0E; --sys-surface: #131A18; --sys-surface-1: #19221F; --sys-surface-2: #202B28; --sys-surface-3: #2A3834;
    --sys-surface-inverse: var(--ref-ink-100); --sys-on-surface-inverse: var(--ref-ink-900);
    --sys-text: #EAF0EE; --sys-text-2: #B7C3BE; --sys-text-3: #98A7A1; --sys-text-disabled: #6B7873;
    --sys-border: #2C3935; --sys-border-strong: #70807A;
    --sys-primary: var(--ref-jade-300); --sys-primary-hover: var(--ref-jade-200); --sys-on-primary: var(--ref-jade-950);
    --sys-primary-container: var(--ref-jade-800); --sys-on-primary-container: var(--ref-jade-100); --sys-link: var(--ref-jade-200);
    --sys-accent: var(--ref-gold-300); --sys-accent-container: #3A2A07; --sys-on-accent-container: #F7DC9B;
    --sys-success: var(--ref-leaf-300); --sys-success-container: #17301A; --sys-on-success-container: #C5E8B3;
    --sys-warning: var(--ref-gold-300); --sys-warning-container: #3A2A07; --sys-on-warning-container: #F7DC9B;
    --sys-danger: var(--ref-crimson-300); --sys-danger-container: var(--ref-crimson-900); --sys-on-danger-container: #FFD9D4; --sys-on-danger: #3B0A07;
    --sys-info: var(--ref-steel-300); --sys-info-container: var(--ref-steel-900); --sys-on-info-container: #D2E7F9;
    --sys-focus: #F1F6F4; --sys-scrim: rgba(0,0,0,.62); --sys-seal: #E2543A; --sys-state-layer: #FFFFFF;
    --viz-1: #6DB8A2; --viz-2: #E0B04A; --viz-3: #F08A7A; --viz-4: #7FB2E5; --viz-5: #C39BD3; --viz-6: #A3B1AB; --viz-grid: #2C3935;
    --sys-elev-1: 0 1px 2px rgba(0,0,0,.5); --sys-elev-2: 0 2px 8px rgba(0,0,0,.5); --sys-elev-3: 0 8px 24px rgba(0,0,0,.6); --sys-elev-4: 0 20px 48px rgba(0,0,0,.7);
    --sys-bar-bg: rgba(19,26,24,.80); --sys-bar-border: rgba(255,255,255,.10);
  }
}

/* ---------- Densidad ---------- */
/* Compacta solo con puntero fino: en táctil se conserva 44 px. */
@media (pointer: fine) {
  :root[data-density="compact"] {
    --ctrl-h: 36px; --ctrl-h-lg: 44px; --ctrl-pad-x: var(--ref-space-4);
    --row-h: 40px; --cell-pad-y: var(--ref-space-2);
    --card-pad: var(--ref-space-5); --gap: var(--ref-space-4); --section-gap: var(--ref-space-7);
  }
}

/* ---------- Clases de tamaño de ventana (M3: compact < 600, medium 600–839, expanded >= 840) ---------- */
@media (min-width: 600px) { :root { --page-pad: var(--ref-space-7); --section-gap: var(--ref-space-9); } }
@media (min-width: 840px) { :root { --page-pad: var(--ref-space-8); } }

/* ---------- Tipografía: escala por rol ---------- */
:root {
  --type-display-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);   --type-display-lh: 1.08;
  --type-headline-l-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);   --type-headline-l-lh: 1.2;
  --type-headline-m-size: 1.375rem;                              --type-headline-m-lh: 1.25;
  --type-title-l-size: 1.125rem;                                 --type-title-l-lh: 1.35;
  --type-title-m-size: 1rem;                                     --type-title-m-lh: 1.4;
  --type-body-l-size: 1rem;                                      --type-body-l-lh: 1.55;
  --type-body-m-size: 0.875rem;                                  --type-body-m-lh: 1.5;
  --type-label-l-size: 0.875rem;                                 --type-label-l-lh: 1.25;
  --type-label-s-size: 0.75rem;                                  --type-label-s-lh: 1.2;
  --type-tracking-display: -0.015em;
  --type-tracking-label: 0.01em;
}
/* CJK: más interlineado, sin tracking negativo, titulares en sans (el serif CJK pierde legibilidad en tamaños pequeños) */
:root:lang(zh) {
  --font-display: var(--ref-font-sans);
  --type-display-lh: 1.2; --type-headline-l-lh: 1.3; --type-headline-m-lh: 1.35;
  --type-title-l-lh: 1.45; --type-body-l-lh: 1.7; --type-body-m-lh: 1.65; --type-label-l-lh: 1.35;
  --type-tracking-display: 0; --type-tracking-label: 0;
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --ref-dur-instant: 0.01ms; --ref-dur-fast: 0.01ms; --ref-dur-base: 0.01ms; --ref-dur-slow: 0.01ms; }
}
:root[data-motion="reduce"] { --ref-dur-instant: 0.01ms; --ref-dur-fast: 0.01ms; --ref-dur-base: 0.01ms; --ref-dur-slow: 0.01ms; }

/* ---------- Alto contraste forzado ---------- */
@media (forced-colors: active) {
  :root { --sys-focus: Highlight; --sys-border-strong: CanvasText; }
}