/**
 * d-aca design tokens (canonical)
 *
 * Contract: docs/design/daca-css-architecture.md
 * Skin program: docs/design/daca-skin-program.md
 * — Only CSS custom properties (and color-scheme if needed).
 * — No component layout rules.
 * — Light defaults on :root; dark/neon only reassign the same names.
 * — Admin shell, dashboard, seller map to these names — do not fork the palette.
 * — --filete is explicit in every skin block (Gold = línea).
 */

/* ---- Light (default) ---- */
:root {
  color-scheme: light;
  /* Brand (immutable hex — semantic roles change with theme, brand names do not) */
  --brand-cream: #E9DDC8;
  --brand-gold: #C8AA78;
  --brand-navy: #233769;
  --brand-navy-deep: #1a2b52;
  --brand-gold-deep: #b8995f;
  --brand-black: #000000;
  --brand-gray: #6E7275;
  --ink: #0b0e13;

  /* Dual primary CTA — light navy+cream · dark gold+navy. Neon reassigns in T53. */
  --btn-primary-bg: var(--brand-navy);
  --btn-primary-fg: var(--brand-cream);
  --btn-primary-hover: var(--brand-navy-deep);
  --btn-primary-hover-fg: #ffffff;
  --btn-primary-hover-border: var(--filete);

  --btn-default-bg: var(--bg-surface);
  --btn-default-fg: var(--title-bar-fg);
  --btn-default-border: var(--border-subtle);
  --btn-default-hover-bg: var(--bg-muted);
  --btn-default-hover-fg: var(--text-primary);
  --btn-default-hover-border: var(--filete);

  /*
   * Montserrat — real weights (no Bold-as-body hack).
   * 400 body · 500 labels/medium · 600 strong UI · 700 titles/CTA
   */
  --font-brand: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-brand-light: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-brand-medium: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-brand-bold: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Surfaces */
  --bg-page: #f4f1ea;
  --bg-surface: #ffffff;
  --bg-elevated: #faf8f4;
  --bg-muted: #f0ebe3;
  --photo-well: #ffffff;

  /* Text & links — roles follow brand names so a skin remap of --brand-* applies */
  --text-primary: var(--brand-black);
  --text-secondary: var(--brand-gray);
  --text-inverse: var(--brand-cream);
  --accent: var(--brand-navy);
  --accent-soft: var(--brand-gold);
  --link: var(--accent);
  /* Light letter. Dark cream / neon phosphor reassign this. */
  --link-hover: var(--title-bar-fg);

  /* Borders — filete mix, not baked rgb */
  --divider: color-mix(in srgb, var(--filete) 35%, transparent);
  --border-subtle: color-mix(in srgb, var(--filete) 22%, transparent);
  --border-strong: color-mix(in srgb, var(--filete) 40%, transparent);

  /* Breadcrumb — Journal D-ACA storefront bar (theme standard) */
  --breadcrumb-bg: #EBECEF;
  --breadcrumb-border: var(--brand-cream);
  --breadcrumb-link: var(--accent);
  --breadcrumb-active: var(--title-bar-fg);
  --breadcrumb-sep: var(--filete);

  /* Chrome */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Dashboard sticky title band (page layer consumes these) */
  --dashboard-title-h: var(--title-bar-h);
  --dashboard-title-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 10px -2px rgba(0, 0, 0, 0.22),
    0 12px 28px -8px rgba(0, 0, 0, 0.28);
  --dashboard-title-panel-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.32);
  --header-bg: var(--brand-navy);
  --header-fg: var(--brand-cream);
  --header-hairline: color-mix(in srgb, var(--brand-navy) 22%, transparent);
  --scrollbar-track: var(--bg-muted);
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 32%, transparent);
  --tile-hero-bg: var(--brand-navy);
  --tile-hero-fg: var(--brand-cream);
  --tile-hero-heading-bg: rgba(0, 0, 0, 0.18);
  --tile-hero-footer-bg: rgba(0, 0, 0, 0.22);
  --sidebar-bg: var(--brand-navy);
  --sidebar-text: var(--brand-cream);
  --sidebar-muted: color-mix(in srgb, var(--brand-cream) 72%, transparent);
  --sidebar-border: color-mix(in srgb, var(--filete) 18%, transparent);
  --sidebar-hover: rgba(0, 0, 0, 0.18);
  --sidebar-active: var(--filete);

  /* Admin shell layout */
  --admin-sidebar-width: 59px;
  --admin-sidebar-expanded: 220px;
  /* Shared left inset: breadcrumb home + logo wordmark */
  --admin-content-gutter: 8px;
  /* Page frame + card rhythm — one truth for admin, vendor, storefront */
  --admin-page-gutter: 8px;
  --admin-header-gap: 8px;
  --admin-card-gap: 8px;
  --page-gutter: var(--admin-page-gutter);
  --page-header-gap: var(--admin-header-gap);
  --page-card-gap: var(--admin-card-gap);
  /* Title bar SoT (admin + vendor + dashboard) — profile ×1.25 of compact */
  --title-bar-h: 45px;
  --title-bar-btn: 35px;
  --title-bar-title-size: 15px;
  --title-bar-subtitle-size: 14px;
  --title-bar-icon-size: 15px;
  --title-bar-pad-y: 5px;
  --title-bar-pad-x: 10px;
  --title-bar-btn-radius: 6px;
  /* Light: navy title + icon-only buttons. Dark reassigns to cream. Filled CTAs keep own fill. */
  --title-bar-fg: var(--brand-navy);
  --title-bar-icon: var(--title-bar-fg);
  --admin-title-btn-h: 35px;
  /* Shared chrome bar (storefront + vendor + admin). Fillet is INSIDE the box. */
  --header-h: 60px;
  --header-h-compact: 56px;
  --header-fillet-h: 2px;
  --header-fillet: var(--brand-gold);
  /* Gold = línea. Cards, keep, destinos hover consume this — not --brand-gold (immutable). */
  --filete: var(--header-fillet);
  /* Hover ink on the navy store header. Aliases the filete so skins remap together. */
  --header-hover: var(--filete);
  --admin-header-height: var(--header-h);
  --admin-logo-mark-height: 48px;
  --admin-logo-inner-left: 53px;
  --admin-logo-mark-width: 84px;

  /*
   * Chrome stacking SoT (admin shell + seller marketplace shell — site-wide)
   * Contract: docs/design/daca-css-architecture.md §4.2
   * Never put open sidebar above header; never sticky header at 1000 under rail 5000.
   */
  --z-header: 10050;           /* fixed #header — always top chrome */
  --z-header-dropdown: 10060;  /* user/store menus under header bar */
  --z-sidebar-open: 5000;      /* hover/active/mobile drawer rail */
  --z-sidebar: 20;             /* collapsed rail base */
  --z-page-sticky: 100;        /* dashboard title toolbar, list sticky bands */
  --z-page-menu: 200;          /* period / filter menus inside page */
  --z-scrim: 1090;             /* mobile nav scrim under drawer */
  --z-tabbar: 1040;            /* storefront piso. Nunca cubre dock 1030. Nunca cubre header. */
  /* Overlay UI sits ABOVE chrome (BS3 1040/1050 is under --z-header). */
  --z-modal: 10100;            /* backdrop + filemanager veil */
  --z-toast: 10120;            /* flash / lightbox above modal */

  /* Controls & panels */
  --input-bg: #ffffff;
  --input-fg: var(--text-primary);
  --input-border: color-mix(in srgb, var(--brand-gray) 35%, transparent);
  --input-focus-border: var(--filete);
  --input-invalid-border: var(--danger);
  --panel-heading: #f7f3ec;
  --danger: #9b2c2c;
  --success: #2f6b3a;
  --warning: #9a6b1f;

  /* Alert surfaces (light) */
  --alert-success-bg: rgba(47, 107, 58, 0.12);
  --alert-success-border: rgba(47, 107, 58, 0.35);
  --alert-info-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --alert-info-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --alert-info-text: var(--accent);
  --alert-warning-bg: rgba(154, 107, 31, 0.12);
  --alert-warning-border: rgba(154, 107, 31, 0.35);
  --alert-danger-bg: rgba(155, 44, 44, 0.12);
  --alert-danger-border: rgba(155, 44, 44, 0.35);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--filete) 28%, transparent);
  --control-height: 36px;

  /*
   * Storefront overlays / float elevation — follow --brand-navy/--brand-gold.
   * Home hero still, destinos photo scrim, explore pops.
   */
  --scrim-hero: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-navy) 92%, transparent),
    color-mix(in srgb, var(--brand-navy) 42%, transparent)
  );
  --scrim-photo: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-navy) 78%, transparent),
    transparent
  );
  /* Destinos tiles — type + veil follow skin (not cream/ink lock). */
  --destinos-fg: var(--tile-hero-fg);
  --destinos-scrim-h: 26%;
  --destinos-scrim: var(--scrim-photo);
  --elev-float: 0 8px 24px color-mix(in srgb, var(--brand-navy) 18%, transparent);
  --border-navy-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --tint-navy: color-mix(in srgb, var(--accent) 6%, transparent);
  --tint-gold: color-mix(in srgb, var(--filete) 14%, transparent);

  /*
   * List / orders ticket contract (admin sale/order ↔ seller vendor-orders)
   * Change type/spacing here once; both surfaces consume the same names.
   * Colors that track brand: use brand/surface tokens; only soft-gold product
   * name is a dedicated role so re-skinning stays one declaration.
   */
  --list-surface-radius: var(--radius-xl);
  --list-surface-bg: var(--bg-page);
  --list-surface-border: var(--border-subtle);
  --list-surface-shadow: var(--shadow);
  --list-card-radius: var(--radius-xl);
  --list-card-pad-y: 8px;
  --list-card-pad-x: 12px;
  --list-card-gap: 8px;
  --list-card-col-gap: 12px;
  --list-card-bg: var(--bg-surface);
  --list-card-rail: color-mix(in srgb, var(--filete) 38%, transparent);
  --list-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);

  --list-id-size: 14px;
  --list-id-weight: 500;
  --list-id-color: var(--title-bar-fg);
  --list-id-letter: 0.01em;

  --list-title-size: 14px;
  --list-title-weight: 500;
  /* Light letter. Dark keeps the cream mix. Rail stays --list-card-rail. */
  --list-title-color: var(--title-bar-fg);

  --list-meta-size: 12px;
  --list-meta-weight: 400;
  --list-meta-color: var(--text-secondary);

  --list-customer-size: 12px;
  --list-customer-weight: 400;
  --list-customer-color: var(--text-secondary);

  --list-total-size: 14px;
  --list-total-weight: 500;
  --list-total-color: var(--text-primary);

  --list-status-size: 11px;
  --list-status-weight: 500;
  --list-status-pad-y: 2px;
  --list-status-pad-x: 8px;
  --list-status-letter: 0.02em;
  --list-status-radius: 999px;

  /* Status pills — vendor-admin + storefront (Processed/Procesada = info) */
  --status-success-fg: var(--success);
  --status-success-bg: rgba(47, 107, 58, 0.12);
  --status-success-bd: rgba(47, 107, 58, 0.28);
  --status-info-fg: var(--accent);
  --status-info-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --status-info-bd: color-mix(in srgb, var(--accent) 28%, transparent);
  --status-warning-fg: var(--warning);
  --status-warning-bg: color-mix(in srgb, var(--warning) 18%, transparent);
  --status-warning-bd: color-mix(in srgb, var(--warning) 40%, transparent);
  --status-danger-fg: var(--danger);
  --status-danger-bg: rgba(155, 44, 44, 0.1);
  --status-danger-bd: rgba(155, 44, 44, 0.28);
  --status-muted-fg: var(--text-secondary);
  --status-muted-bg: color-mix(in srgb, var(--brand-gray) 8%, transparent);
  --status-muted-bd: var(--border-subtle);

  --list-action-size: 32px;
  --list-action-bg: color-mix(in srgb, var(--filete) 10%, transparent);
  --list-action-border: color-mix(in srgb, var(--filete) 28%, transparent);
  --list-action-color: var(--title-bar-fg);

  --list-thead-size: 14px;
  --list-thead-weight: 500;
  /* Thead letters stay gold. Contract §4.6 determines this, unlike ids and titles. */
  --list-thead-color: var(--filete);
  --list-thead-letter: 0.04em;
  --list-thead-pad-y: 11px;
  --list-thead-pad-x: 14px;
  --list-thead-bg: var(--bg-muted);

  --list-filter-label-size: 13px;
  --list-filter-label-weight: 500;
  --list-filter-label-letter: 0.02em;
  --list-filter-input-size: 15px;
  --list-filter-input-radius: 8px;
  --list-filter-grid-pad-y: 12px;
  --list-filter-grid-pad-x: 14px;
  --list-filter-gap: 8px;

  --list-h1-size: var(--title-bar-title-size, 15px);
  --list-h1-weight: 700;
  --list-h1-letter: -0.02em;
  --list-subtitle-size: var(--title-bar-subtitle-size, 14px);
  --list-subtitle-weight: 400;

  /*
   * Order-info ticket (admin sale/order/info ↔ seller vendor-order-info)
   * Reuses list type/status/product gold where semantics match.
   */
  --oi-gap: 10px;
  --oi-mast-pad-y: 10px;
  --oi-mast-pad-x: 12px;
  --oi-mast-radius: var(--radius-lg, 10px);
  --oi-mast-bg: var(--bg-surface);
  --oi-mast-border: var(--border-subtle);
  --oi-mast-shadow: var(--shadow);
  --oi-mast-total-size: 16px;
  --oi-mast-total-weight: 600;
  /* Light ticket titles: accent role (navy). Brand hex stays immutable. */
  --oi-h1-color: var(--title-bar-fg);
  --oi-title-color: var(--accent);
  --oi-title-icon: var(--accent);
  --oi-mast-total-color: var(--accent);
  --oi-status-title-color: var(--accent);
  --oi-status-title-icon: var(--accent);
  --oi-card-radius: var(--radius-lg, 10px);
  --oi-card-pad-y: 8px;
  --oi-card-pad-x: 10px;
  --oi-card-head-size: 13px;
  --oi-card-head-weight: 600;
  --oi-card-head-letter: 0.04em;
  --oi-card-head-bg: var(--bg-elevated);
  --oi-product-name-size: var(--list-title-size, 14px);
  --oi-product-name-weight: var(--list-title-weight, 500);
  --oi-product-name-color: var(--list-title-color);
  --oi-line-total-size: var(--list-total-size, 14px);
  --oi-section-gap: 8px;

  /* Charts / map canvas + rare KPI accents (dashboard) */
  --chart-surface: #f0ebe3;
  --chart-series-1: var(--accent);
  --chart-series-2: #5BA3D9;
  --chart-series-ok: var(--success);
  --chart-grid: color-mix(in srgb, var(--accent) 15%, transparent);
  --chart-tick: var(--text-secondary);
  --map-marker: var(--filete);
  --kpi-accent-par: #6b5b95;
  --kpi-accent-bar: #b86b8c;

  /* Overlay UI — modal / toast / dropzone (filemanager + flash consume these) */
  --modal-overlay: color-mix(in srgb, var(--ink) 55%, transparent);
  --modal-overlay-deep: color-mix(in srgb, var(--ink) 82%, transparent);
  --modal-bg: var(--bg-surface);
  --modal-fg: var(--text-primary);
  --modal-border: var(--border-subtle);
  --modal-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --modal-header-bg: var(--bg-elevated);
  --toast-bg: var(--bg-surface);
  --toast-fg: var(--title-bar-fg);
  --toast-border: var(--border-subtle);
  --toast-shadow: var(--elev-float);
  --dropzone-bg: color-mix(in srgb, var(--filete) 6%, transparent);
  --dropzone-border: color-mix(in srgb, var(--filete) 45%, transparent);
  --dropzone-fg: var(--text-secondary);
  --dropzone-active-bg: color-mix(in srgb, var(--filete) 16%, transparent);
  --dropzone-active-border: var(--filete);
  --dropzone-active-fg: var(--text-primary);
}

/* ---- Dark (same names only) ---- */
html.admin-theme-dark,
body.admin-theme-dark,
html.seller-theme-dark,
body.seller-theme-dark,
html.daca-theme-dark,
body.daca-theme-dark {
  color-scheme: dark;

  --bg-page: #040608;
  --bg-surface: #121820;
  --bg-elevated: #1a212c;
  --bg-muted: #0a0d12;
  --photo-well: #040608;

  --text-primary: var(--brand-cream);
  --text-secondary: #9a9ea2;
  --text-inverse: #07090c;
  --title-bar-fg: var(--text-primary);
  --title-bar-icon: var(--title-bar-fg);

  --accent: var(--brand-gold);
  --accent-soft: var(--brand-navy);
  --link: var(--accent);
  --link-hover: var(--brand-cream);

  --btn-primary-bg: var(--brand-gold);
  --btn-primary-fg: var(--brand-navy);
  --btn-primary-hover: var(--brand-gold-deep);
  --btn-primary-hover-fg: var(--brand-navy);
  --btn-primary-hover-border: var(--brand-gold-deep);

  --btn-default-bg: var(--bg-elevated);
  --btn-default-fg: var(--text-primary);
  --btn-default-border: var(--border-strong);
  --btn-default-hover-bg: var(--bg-muted);
  --btn-default-hover-fg: var(--text-primary);
  --btn-default-hover-border: var(--filete);

  --divider: color-mix(in srgb, var(--filete) 9%, transparent);
  --border-subtle: color-mix(in srgb, var(--filete) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--filete) 18%, transparent);

  --breadcrumb-bg: #0c1016;
  --breadcrumb-border: color-mix(in srgb, var(--filete) 22%, transparent);
  --breadcrumb-link: var(--accent);
  --breadcrumb-active: var(--text-primary);
  --breadcrumb-sep: var(--filete);

  --shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  --dashboard-title-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    0 6px 14px -2px rgba(0, 0, 0, 0.55),
    0 16px 32px -8px rgba(0, 0, 0, 0.72);
  --dashboard-title-panel-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
  --header-bg: #000;
  --header-fg: var(--brand-gold);
  --header-hairline: var(--border-subtle);
  --header-fillet: var(--accent);
  --filete: var(--header-fillet);
  --header-hover: var(--filete);
  --scrollbar-track: #0b0e13;
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 28%, transparent);
  --tile-hero-bg: var(--bg-elevated);
  --tile-hero-fg: var(--text-primary);
  --tile-hero-heading-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --tile-hero-footer-bg: rgba(0, 0, 0, 0.25);
  --sidebar-bg: #07090c;
  --sidebar-text: var(--brand-cream);
  --sidebar-muted: color-mix(in srgb, var(--brand-cream) 62%, transparent);
  --sidebar-border: color-mix(in srgb, var(--filete) 7%, transparent);
  --sidebar-hover: #171d26;
  --sidebar-active: var(--accent);

  --input-bg: #070a0f;
  --input-fg: var(--text-primary);
  --input-border: color-mix(in srgb, var(--text-primary) 26%, transparent);
  --input-focus-border: var(--filete);
  --input-invalid-border: var(--danger);
  --panel-heading: #171d26;

  --danger: #e07a7a;
  --success: #7dba88;
  --warning: #d4b36a;

  --alert-success-bg: #14241a;
  --alert-success-border: #1e3a28;
  --alert-info-bg: #141c2c;
  --alert-info-border: var(--accent-soft);
  --alert-info-text: var(--text-primary);
  --alert-warning-bg: #241c12;
  --alert-warning-border: #3a3020;
  --alert-danger-bg: #2a1414;
  --alert-danger-border: #3a2020;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--filete) 22%, transparent);
  --elev-float: 0 8px 24px rgba(0, 0, 0, 0.45);
  --scrim-hero: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 92%, transparent),
    color-mix(in srgb, var(--ink) 42%, transparent)
  );
  --scrim-photo: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 78%, transparent),
    transparent
  );
  --border-navy-soft: var(--border-subtle);
  --tint-navy: color-mix(in srgb, var(--accent) 8%, transparent);

  /* List / orders — dark reassignments only */
  --list-surface-bg: var(--bg-page);
  --list-card-bg: var(--bg-surface);
  --list-card-rail: color-mix(in srgb, var(--filete) 28%, transparent);
  --list-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  --list-surface-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  --list-title-color: color-mix(in srgb, var(--brand-cream) 82%, var(--filete));
  --list-id-color: var(--filete);
  --list-total-color: var(--text-primary);
  --list-customer-color: var(--text-secondary);
  --list-meta-color: var(--text-secondary);
  --list-action-bg: color-mix(in srgb, var(--filete) 10%, transparent);
  --list-action-border: color-mix(in srgb, var(--filete) 28%, transparent);
  --list-action-color: var(--filete);
  --list-thead-color: var(--filete);
  --list-thead-bg: var(--bg-muted);

  --status-success-fg: var(--success);
  --status-success-bg: rgba(125, 186, 136, 0.14);
  --status-success-bd: rgba(125, 186, 136, 0.28);
  --status-info-fg: #8ec8e8;
  --status-info-bg: rgba(94, 184, 224, 0.14);
  --status-info-bd: rgba(94, 184, 224, 0.28);
  --status-warning-fg: var(--warning);
  --status-warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
  --status-warning-bd: color-mix(in srgb, var(--warning) 28%, transparent);
  --status-danger-fg: var(--danger);
  --status-danger-bg: color-mix(in srgb, var(--danger) 14%, transparent);
  --status-danger-bd: color-mix(in srgb, var(--danger) 28%, transparent);
  --status-muted-fg: var(--text-secondary);
  --status-muted-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --status-muted-bd: var(--border-subtle);

  /* Order-info dark — only reassign colors (layout tokens unchanged) */
  --oi-mast-bg: var(--bg-surface);
  --oi-mast-border: var(--border-subtle);
  --oi-mast-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  --oi-h1-color: var(--title-bar-fg);
  --oi-title-color: var(--accent);
  --oi-title-icon: var(--accent);
  --oi-mast-total-color: var(--text-primary);
  --oi-status-title-color: var(--text-secondary);
  --oi-status-title-icon: var(--accent);
  --oi-card-head-bg: var(--bg-elevated);
  --oi-product-name-color: var(--list-title-color);

  --chart-surface: #10151c;
  --chart-series-1: var(--accent);
  --chart-series-2: var(--status-info-fg);
  --chart-series-ok: var(--success);
  --chart-grid: color-mix(in srgb, var(--text-primary) 18%, transparent);
  --chart-tick: var(--text-secondary);
  --map-marker: var(--filete);
  --kpi-accent-par: #a78bfa;
  --kpi-accent-bar: #f0a3c7;

  --modal-overlay: color-mix(in srgb, var(--ink) 55%, transparent);
  --modal-overlay-deep: color-mix(in srgb, var(--ink) 82%, transparent);
  --modal-bg: var(--bg-surface);
  --modal-fg: var(--text-primary);
  --modal-border: var(--border-subtle);
  --modal-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --modal-header-bg: var(--bg-elevated);
  --toast-bg: var(--bg-surface);
  --toast-fg: var(--title-bar-fg);
  --toast-border: var(--border-subtle);
  --toast-shadow: var(--elev-float);
  --dropzone-bg: color-mix(in srgb, var(--filete) 6%, transparent);
  --dropzone-border: color-mix(in srgb, var(--filete) 45%, transparent);
  --dropzone-fg: var(--text-secondary);
  --dropzone-active-bg: color-mix(in srgb, var(--filete) 16%, transparent);
  --dropzone-active-border: var(--filete);
  --dropzone-active-fg: var(--text-primary);
}

/*
 * Neon — same names as light/dark, no layout.
 * Pigments: petróleo / chasis / torre / hueso / acero / fósforo / scan.
 * Do not add *-theme-dark alongside this class.
 */
html.daca-theme-neon,
body.daca-theme-neon {
  color-scheme: dark;

  /* Brand hex stays immutable. Skin = roles only. */
  --accent: #E6FF2A;
  --accent-soft: #3EC8FF;
  --ink: #08090C;

  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--ink);
  --btn-primary-hover: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --btn-primary-hover-fg: var(--ink);
  --btn-primary-hover-border: color-mix(in srgb, var(--accent) 82%, var(--ink));

  --btn-default-bg: var(--bg-elevated);
  --btn-default-fg: var(--text-primary);
  --btn-default-border: var(--border-strong);
  --btn-default-hover-bg: var(--bg-muted);
  --btn-default-hover-fg: var(--text-primary);
  --btn-default-hover-border: var(--filete);

  --bg-page: var(--ink);
  --bg-surface: #12161F;
  --bg-elevated: #0C1422;
  --bg-muted: #0A0E16;
  --photo-well: var(--ink);

  --text-primary: #E7EDF3;
  --text-secondary: #8A96A6;
  --text-inverse: var(--ink);
  --title-bar-fg: var(--text-primary);
  --title-bar-icon: var(--title-bar-fg);

  --link: var(--accent-soft);
  --link-hover: var(--accent);

  --divider: color-mix(in srgb, var(--accent) 12%, transparent);
  --border-subtle: color-mix(in srgb, var(--accent-soft) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--accent) 28%, transparent);

  --breadcrumb-bg: #0C1422;
  --breadcrumb-border: color-mix(in srgb, var(--accent-soft) 20%, transparent);
  --breadcrumb-link: var(--accent-soft);
  --breadcrumb-active: var(--text-primary);
  --breadcrumb-sep: var(--filete);

  --shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  --dashboard-title-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    0 6px 14px -2px rgba(0, 0, 0, 0.55),
    0 16px 32px -8px rgba(0, 0, 0, 0.72);
  --dashboard-title-panel-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
  --header-bg: var(--ink);
  --header-fg: var(--accent);
  --header-hairline: var(--border-subtle);
  --scrollbar-track: #0b0e13;
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 28%, transparent);
  --tile-hero-bg: var(--bg-elevated);
  --tile-hero-fg: var(--text-primary);
  --tile-hero-heading-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --tile-hero-footer-bg: rgba(0, 0, 0, 0.25);
  --header-fillet: var(--accent);
  --filete: var(--header-fillet);
  --header-hover: var(--filete);
  --sidebar-bg: var(--ink);
  --sidebar-text: var(--text-primary);
  --sidebar-muted: color-mix(in srgb, var(--text-secondary) 72%, transparent);
  --sidebar-border: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  --sidebar-hover: #0C1422;
  --sidebar-active: var(--accent);

  --input-bg: var(--ink);
  --input-fg: var(--text-primary);
  --input-border: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  --input-focus-border: var(--filete);
  --input-invalid-border: var(--danger);
  --panel-heading: #0C1422;

  --danger: #FF2B6A;
  --success: #7dba88;
  --warning: #FF641A;

  --alert-success-bg: #14241a;
  --alert-success-border: #1e3a28;
  --alert-info-bg: #0C1422;
  --alert-info-border: var(--accent-soft);
  --alert-info-text: var(--text-primary);
  --alert-warning-bg: #24180e;
  --alert-warning-border: var(--warning);
  --alert-danger-bg: #2a1018;
  --alert-danger-border: var(--danger);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --elev-float: 0 8px 24px rgba(0, 0, 0, 0.45);
  --scrim-hero: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 92%, transparent),
    color-mix(in srgb, var(--ink) 42%, transparent)
  );
  --scrim-photo: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 78%, transparent),
    transparent
  );
  --border-navy-soft: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  --tint-navy: color-mix(in srgb, var(--accent) 8%, transparent);
  --tint-gold: color-mix(in srgb, var(--accent) 14%, transparent);

  --list-surface-bg: var(--bg-page);
  --list-card-bg: var(--bg-surface);
  --list-card-rail: color-mix(in srgb, var(--filete) 32%, transparent);
  --list-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  --list-surface-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  --list-title-color: var(--text-primary);
  --list-id-color: var(--filete);
  --list-total-color: var(--text-primary);
  --list-customer-color: var(--text-secondary);
  --list-meta-color: var(--text-secondary);
  --list-action-bg: color-mix(in srgb, var(--filete) 10%, transparent);
  --list-action-border: color-mix(in srgb, var(--filete) 28%, transparent);
  --list-action-color: var(--filete);
  --list-thead-color: var(--filete);
  --list-thead-bg: var(--bg-muted);

  --status-success-fg: var(--success);
  --status-success-bg: color-mix(in srgb, var(--success) 14%, transparent);
  --status-success-bd: color-mix(in srgb, var(--success) 28%, transparent);
  --status-info-fg: var(--accent-soft);
  --status-info-bg: color-mix(in srgb, var(--accent-soft) 14%, transparent);
  --status-info-bd: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  --status-warning-fg: var(--warning);
  --status-warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
  --status-warning-bd: color-mix(in srgb, var(--warning) 28%, transparent);
  --status-danger-fg: var(--danger);
  --status-danger-bg: color-mix(in srgb, var(--danger) 14%, transparent);
  --status-danger-bd: color-mix(in srgb, var(--danger) 28%, transparent);
  --status-muted-fg: var(--text-secondary);
  --status-muted-bg: color-mix(in srgb, var(--text-secondary) 8%, transparent);
  --status-muted-bd: var(--border-subtle);

  --oi-mast-bg: var(--bg-surface);
  --oi-mast-border: var(--border-subtle);
  --oi-mast-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  --oi-h1-color: var(--title-bar-fg);
  --oi-title-color: var(--accent);
  --oi-title-icon: var(--accent);
  --oi-mast-total-color: var(--text-primary);
  --oi-status-title-color: var(--text-secondary);
  --oi-status-title-icon: var(--accent);
  --oi-card-head-bg: var(--bg-elevated);
  --oi-product-name-color: var(--list-title-color);

  --chart-surface: #0C1422;
  --chart-series-1: var(--accent);
  --chart-series-2: var(--accent-soft);
  --chart-series-ok: var(--success);
  --chart-grid: color-mix(in srgb, var(--accent) 18%, transparent);
  --chart-tick: var(--text-secondary);
  --map-marker: var(--filete);
  --kpi-accent-par: var(--accent-soft);
  --kpi-accent-bar: var(--danger);

  --modal-overlay: color-mix(in srgb, var(--ink) 55%, transparent);
  --modal-overlay-deep: color-mix(in srgb, var(--ink) 82%, transparent);
  --modal-bg: var(--bg-surface);
  --modal-fg: var(--text-primary);
  --modal-border: var(--border-subtle);
  --modal-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --modal-header-bg: var(--bg-elevated);
  --toast-bg: var(--bg-surface);
  --toast-fg: var(--title-bar-fg);
  --toast-border: var(--border-subtle);
  --toast-shadow: var(--elev-float);
  --dropzone-bg: color-mix(in srgb, var(--filete) 6%, transparent);
  --dropzone-border: color-mix(in srgb, var(--filete) 45%, transparent);
  --dropzone-fg: var(--text-secondary);
  --dropzone-active-bg: color-mix(in srgb, var(--filete) 16%, transparent);
  --dropzone-active-border: var(--filete);
  --dropzone-active-fg: var(--text-primary);
}