/*
 * ============================================
 *  DESIGN TOKENS — SEMANTICS
 * ============================================
 *  Maps primitives to functional names.
 *  ALL component/page CSS must use ONLY these.
 *  brand.css can override any of these.
 * ============================================
 */

:root {
    /* ---- Runtime layout vars (set by JS — NOT colors) ----
       --fill: ancho del relleno de barras de progreso (p.ej. style="--fill:60%").
       Se declara aquí (default 0%) para que el gate de tokens-fantasma del
       design-pack lo reconozca como definido. */
    --fill: 0%;

    /* ---- Brand / Primary ---- */
    --color-primary:          var(--blue-600);
    --color-primary-hover:    var(--blue-700);
    --color-primary-active:   var(--blue-800);
    --color-primary-light:    var(--blue-50);
    --color-primary-contrast: var(--white);

    /* ---- Brand / Accent (0.6b — role lives here, VALUE in brand.css) ----
       New role added in sub-phase 0.6b (design.md §2/§3, lock L0.6-ACENTO).
       For Veriko, accent == primary (single brand color); both are remapped
       to #2f4f99 in brand.css. The role is defined here so screens can use a
       semantic --color-accent name; the value is the brand layer's job. */
    --color-accent:          var(--color-primary);
    --color-accent-hover:    var(--color-primary-hover);
    --color-accent-active:   var(--color-primary-active);
    --color-accent-light:    var(--color-primary-light);
    --color-accent-contrast: var(--color-primary-contrast);

    /* ---- Surfaces ---- */
    --color-surface:        var(--white);
    --color-surface-raised: var(--white);
    --color-surface-sunken: var(--gray-50);
    --color-surface-overlay: rgba(0, 0, 0, 0.5);

    /* ---- Backgrounds ---- */
    --color-bg:         var(--gray-50);
    --color-bg-sidebar: var(--gray-900);
    --color-bg-topbar:  var(--white);

    /* ---- Text ---- */
    --color-text-primary:   var(--gray-900);
    --color-text-secondary: var(--gray-500);
    --color-text-tertiary:  var(--gray-400);
    --color-text-disabled:  var(--gray-300);
    --color-text-inverse:   var(--white);
    --color-text-link:      var(--blue-600);
    --color-text-link-hover: var(--blue-700);

    /* ---- Sidebar ---- */
    --color-sidebar-text:        var(--gray-300);
    --color-sidebar-text-active: var(--white);
    --color-sidebar-icon:        var(--gray-400);
    --color-sidebar-icon-active: var(--white);
    --color-sidebar-section:     var(--gray-300);  /* group/section labels — readable, not dim */
    --color-sidebar-item-hover:  rgba(255, 255, 255, 0.08);
    --color-sidebar-item-active: rgba(255, 255, 255, 0.12);
    --color-sidebar-divider:     rgba(255, 255, 255, 0.08);
    /* ---- Status: Success ---- */
    --color-success:       var(--green-600);
    --color-success-hover: var(--green-700);
    --color-success-light: var(--green-50);
    --color-success-text:  var(--green-700);
    /* ---- Status: Danger ---- */
    --color-danger:       var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-light: var(--red-50);
    --color-danger-text:  var(--red-700);
    /* ---- Status: Warning ---- */
    --color-warning:       var(--amber-500);
    --color-warning-hover: var(--amber-600);
    --color-warning-light: var(--amber-50);
    --color-warning-text:  var(--amber-600);
    /* ---- Status: Info ---- */
    --color-info:       var(--blue-500);
    --color-info-hover: var(--blue-600);
    --color-info-light: var(--blue-50);
    --color-info-text:  var(--blue-700);

    /* ---- Borders ---- */
    --color-border:        var(--gray-200);
    --color-border-strong: var(--gray-300);
    --color-border-focus:  var(--blue-500);
    --color-border-error:  var(--red-500);

    /* ---- Focus Ring ---- */
    --ring-color:  var(--blue-500);
    --ring-offset: 2px;
    --ring-width:  2px;

    /* ---- Layout Dimensions ---- */
    --sidebar-width:           260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height:           64px;
    --content-max-width:       1280px;

    /* ---- Font Families ---- */
    --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    /* ---- Z-Index Scale ----
       In-flow layers (low numbers) stack normally with surrounding content:
         --z-dropdown  (20) → legacy value kept for back-compat with older
                              page CSS that uses it. Do NOT use for new
                              popovers — new popovers teleport to <body>
                              and use --z-popover instead.
       Floating layers (9000+) escape overflow:hidden ancestors via
       position:fixed after being teleported to <body>. They stack above
       everything in the page flow (tables with sticky headers, sidebar,
       topbar). Ordering:
         --z-popover  (9997) → popovers / teleported dropdowns
         --z-modal    (9998) → modal overlays (on top of popovers so a
                              modal opened from a dropdown appears above)
         --z-toast    (9999) → toasts (always on top of everything)                              */
    --z-dropdown: 20;
    --z-topbar:   30;
    --z-sidebar: 200;
    --z-popover:  9997;
    --z-modal:    9998;
    --z-toast:    9999;
    --z-tooltip:  10000;

    /* ---- Input ---- */
    --input-height:       40px;
    --input-height-sm:    32px;
    --input-height-lg:    48px;
    --input-border-color: var(--color-border);
    --input-bg:           var(--white);
    --input-focus-ring:   0 0 0 var(--ring-width) rgba(59, 130, 246, 0.3);

    /* ---- Button ---- */
    --btn-radius: var(--radius-lg);

    /* ---- Card ---- */
    /* 0.6b — lowered --radius-xl (12px) → --radius-lg (8px) to enter the
       6–8px shape direction (lock L0.6-M3 / design.md §3, §5 nota). */
    --card-radius:  var(--radius-lg);
    --card-shadow:  var(--shadow-sm);
    --card-padding: var(--space-6);

    /* ---- Table ---- */
    --table-row-hover: var(--gray-50);
    --table-border:    var(--color-border);
    --table-header-bg: var(--gray-50);

    /* ---- Badge ---- */
    --badge-radius: var(--radius-full);
}

/*
 * ============================================
 *  COMPAT ALIASES — phantom-token reconciliation (sub-phase 0.6b)
 * ============================================
 *  The 0.0 UI audit (docs/design/current-ui-audit.md §5/§6a) found the
 *  component layer references many NON-canonical token names that were
 *  never defined, so they silently fell back to a hardcoded hex (it looked
 *  tokenized, it was hardcoded). design.md §5 / the 0.6a ledger registered
 *  this as a deferred gap; 0.6b resolves it the way the audit prescribes:
 *  map each phantom name to its canonical role here, in ONE place. These are
 *  ALIASES (var → canonical role), so every consumer now converges on the
 *  Veriko values from brand.css instead of a stale fallback (this is what
 *  kills the rogue #2563eb / #0f4c81 fallbacks and the near-black
 *  dark-mode `*-bg` fallbacks that bled into the light theme).
 *
 *  Additive only — defines previously-undefined names; adds no new visual
 *  vocabulary. New screens must still use the canonical roles above, not
 *  these aliases. The aliases exist to retire the legacy debt without a
 *  per-file rewrite (which is a separate mechanical sweep).
 * ============================================
 */
:root {
    /* Text */
    --text-primary:          var(--color-text-primary);
    --text-secondary:        var(--color-text-secondary);
    --text-default:          var(--color-text-primary);
    --text-muted:            var(--color-text-tertiary);
    --color-text:            var(--color-text-primary);
    --color-text-muted:      var(--color-text-tertiary);

    /* Brand / accent legacy names */
    --color-brand:           var(--color-primary);
    --brand-primary:         var(--color-primary);
    --color-primary-bg:      var(--color-primary-light);
    --color-primary-text:    var(--color-primary);
    --retry-accent:          var(--color-primary);

    /* Surfaces */
    --surface-elevated:      var(--color-surface-raised);
    --surface-muted:         var(--color-surface-sunken);
    --surface-elev1:         var(--color-surface-sunken);
    --bg-surface:            var(--color-surface);
    --color-surface-alt:     var(--color-surface-sunken);
    --color-surface-subtle:  var(--color-surface-sunken);
    --color-surface-muted:   var(--color-surface-sunken);
    --color-surface-secondary: var(--color-surface-sunken);
    --color-surface-1:       var(--color-surface);
    --color-surface-2:       var(--color-surface-sunken);

    /* Backgrounds */
    --color-bg-app:          var(--color-bg);
    --color-bg-tertiary:     var(--color-surface-sunken);
    --color-bg-secondary:    var(--color-surface-sunken);
    --color-bg-subtle:       var(--color-surface-sunken);
    --color-bg-hover:        var(--color-surface-sunken);
    --color-bg-card:         var(--color-surface);

    /* Borders */
    --border-default:        var(--color-border);
    --border-color:          var(--color-border);
    --border:                var(--color-border);
    --color-border-subtle:   var(--color-border);

    /* Fonts */
    --font-mono:             var(--font-family-mono);
    --font-weight-regular:   var(--font-normal);
    --font-weight-medium:    var(--font-medium);
    --font-weight-semibold:  var(--font-semibold);
    --font-weight-bold:      var(--font-bold);
    --font-extrabold:        var(--font-bold);    /* ceiling 700 (L0.6-TIPO) — 800/900 retired */
    --font-size-xs:          var(--text-xs);
    --font-size-sm:          var(--text-sm);
    --font-size-md:          var(--text-base);
    --font-size-base:        var(--text-base);
    --font-size-lg:          var(--text-lg);
    --font-size-xl:          var(--text-xl);
    --font-size-2xl:         var(--text-2xl);
    --font-size-3xl:         var(--text-3xl);
    --font-size-4xl:         var(--text-4xl);

    /* State: soft / bg / dark legacy names → canonical -light / -text */
    --color-success-soft:        var(--color-success-light);
    --color-success-bg:          var(--color-success-light);
    --color-success-dark:        var(--color-success-text);
    --color-success-soft-border: var(--color-success-light);
    --color-warning-soft:        var(--color-warning-light);
    --color-warning-bg:          var(--color-warning-light);
    --color-warning-border:      var(--color-warning);
    --color-danger-soft:         var(--color-danger-light);
    --color-danger-bg:           var(--color-danger-light);
    --color-danger-subtle:       var(--color-danger-light);
    --color-danger-dark:         var(--color-danger-text);
    --color-danger-hover-strong: var(--color-danger-hover);
    --color-info-soft:           var(--color-info-light);
    --color-info-bg:             var(--color-info-light);
    --color-info-subtle:         var(--color-info-light);
    --color-info-dark:           var(--color-info-text);
    --color-warning-dark:        var(--color-warning-text);
    --color-info-soft-border:    var(--color-info-light);
    --color-warning-soft-border: var(--color-warning-light);
    --color-on-primary:          var(--color-primary-contrast);
    --color-primary-soft:        var(--color-primary-light);
    --color-accent-soft:         var(--color-accent-light);
}