/* ═══════════════════════════════════════════════════════════════
   VALORANL DESIGN TOKENS — Single source of truth
   Archivo: public/assets/css/valoranl-tokens.css
   Solo :root, zero selectores, zero riesgo de conflicto
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Brand colors ─── */
    --vn-deep-teal:    #002b36;
    --vn-teal-mid:     #01434f;
    --vn-gold:         #e6d7b8;
    --vn-gold-bright:  #f0e2c0;
    --vn-gold-muted:   #c4b89a;
    --vn-cyan:         #2c7a8b;
    --vn-sage:         #7a9e8e;
    --vn-sage-light:   #a8c5b8;
    --vn-sage-dark:    #2d4a3e;
    --vn-white:        #ffffff;
    --vn-dark:         #1f373f;

    /* ─── Semantic colors ─── */
    --vn-success:      #22c55e;
    --vn-warning:      #eab308;
    --vn-danger:       #ef4444;
    --vn-info:         #38bdf8;

    /* ─── Surfaces (glass) ─── */
    --vn-glass-bg:     rgba(6, 43, 54, 0.55);
    --vn-glass-border: rgba(230, 215, 184, 0.22);
    --vn-surface-dark: rgba(10, 36, 46, 0.92);
    --vn-surface-card: rgba(6, 43, 54, 0.75);

    /* ─── Text ─── */
    --vn-text-primary:   #f2f5f7;
    --vn-text-secondary: rgba(242, 245, 247, 0.65);
    --vn-text-muted:     rgba(242, 245, 247, 0.55);

    /* ─── Typography ─── */
    --vn-font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --vn-font-heading: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --vn-tracking-cap: 0.08em;

    /* ─── Border radius ─── */
    --vn-radius-sm:    8px;
    --vn-radius-md:    12px;
    --vn-radius-lg:    16px;
    --vn-radius-pill:  50px;

    /* ─── Shadows ─── */
    --vn-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.15);
    --vn-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.22);
    --vn-shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.3);
    --vn-shadow-glow:  0 0 20px rgba(230, 215, 184, 0.35);

    /* ─── Motion ─── */
    --vn-ease-default: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --vn-ease-fast:    0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Input ─── */
    --vn-input-h:      40px;

    /* ─── Select2 — Light (map) ─── */
    --s2-light-bg:     #ffffff;
    --s2-light-text:   #12303a;
    --s2-light-bdr:    rgba(18, 48, 58, 0.2);
    --s2-light-ph:     rgba(18, 48, 58, 0.38);

    /* ─── Select2 — Dark (form) ─── */
    --s2-dark-bg:      rgba(255, 255, 255, 0.06);
    --s2-dark-text:    #e6d7b8;
    --s2-dark-bdr:     rgba(230, 215, 184, 0.2);
    --s2-dark-ph:      rgba(230, 215, 184, 0.38);

    /* ─── Select2 — Dropdown ─── */
    --s2-dd-bg:        #0a2430;
    --s2-dd-bdr:       rgba(122, 158, 142, 0.4);
    --s2-dd-text:      #dbe7ec;
    --s2-dd-hl:        rgba(122, 158, 142, 0.35);
    --s2-dd-sel:       rgba(122, 158, 142, 0.18);
}