/* ============================================================
   DESIGN SYSTEM — DARK MODE
   Path: /assets/css/design-system/src/dark.css
   ============================================================ */

/* =========================
   ROOT DARK THEME
========================= */
[data-theme="dark"] {
    /* =========================
       SURFACES
    ========================= */
    --surface-page:   #0b1220;
    --surface-card:   #111827;
    --surface-subtle: #1f2937;
    --surface-dark:   #020617;
    --surface-input:  #0f172a; /* darker inset surface for form inputs */

    /* =========================
       TEXT
    ========================= */
    --color-heading: #f9fafb;
    --color-body:    #d1d5db;
    --color-muted:   #9ca3af;
    --color-faint:   #6b7280;

    /* =========================
       BORDERS
    ========================= */
    --border-color: #1f2937;
    --border-color-strong: #334155;

    /* =========================
       SHADOWS (softer on dark)
    ========================= */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 6px 20px rgba(0, 0, 0, 0.5);

    /* =========================
       BRAND TWEAKS
    ========================= */
    --ds-indigo-light:     rgba(79, 70, 229, 0.15);
    --ds-indigo-border:    rgba(79, 70, 229, 0.35); /* was the light-mode #c7d2fe pastel — read as a stray glowing edge on a dark card */

    /* =========================
       STATUS TINTS
       tokens.css:--color-{green,red,amber,blue,purple}-light/-border are
       background/border-only (never used for text, icon fills, or
       gradients — verified across app/Views and the design system), so
       they're safe to swap for translucent dark-safe versions here.
       The base --color-* tokens are left untouched since they also back
       solid fills/gradients/dots that must keep their light-mode
       saturation. Text/icons that sit on these tints instead get the
       brighter *-text-dark variant below, wired up per component further
       down — the same pattern --ds-indigo-text-dark already established
       for .ds-link.
    ========================= */
    --color-green-light:      rgba(16, 185, 129, 0.12);
    --color-green-border:     rgba(16, 185, 129, 0.35);

    --color-red-light:        rgba(239, 68, 68, 0.12);
    --color-red-border:       rgba(239, 68, 68, 0.35);

    --color-amber-light:      rgba(245, 158, 11, 0.12);
    --color-amber-border:     rgba(245, 158, 11, 0.35);

    --color-blue-light:       rgba(59, 130, 246, 0.12);
    --color-blue-border:      rgba(59, 130, 246, 0.35);

    --color-purple-light:     rgba(124, 58, 237, 0.12);
    --color-purple-border:    rgba(124, 58, 237, 0.35);

    --color-orange-light:     rgba(234, 88, 12, 0.12);
    --color-orange-border:    rgba(234, 88, 12, 0.35);

    --color-pink-light:       rgba(219, 39, 119, 0.12);
    --color-pink-border:      rgba(219, 39, 119, 0.35);

    /* Text-on-tint tokens (tokens.css) take the bright variants in dark mode */
    --color-orange-text: var(--color-orange-text-dark);
    --color-pink-text:   var(--color-pink-text-dark);
    --ds-indigo-text:    var(--ds-indigo-text-dark);
    --color-green-text:  var(--color-green-text-dark);
    --color-red-text:    var(--color-red-text-dark);
    --color-amber-text:  var(--color-amber-text-dark);
    --color-blue-text:   var(--color-blue-text-dark);
    --color-purple-text: var(--color-purple-text-dark);
}

/* =========================
   COMPONENT FIXES
========================= */

/* Inputs */
[data-theme="dark"] .ds-input,
[data-theme="dark"] .ds-select,
[data-theme="dark"] .ds-textarea {
    background: var(--surface-input);
    color: var(--color-body);
}

/* Cards */
[data-theme="dark"] .ds-card {
    background: var(--surface-card);
    border-color: var(--border-color);
}

/* Tables */
[data-theme="dark"] .ds-table tr:hover td {
    background: var(--surface-subtle);
}
[data-theme="dark"] .ds-table-link--view,
[data-theme="dark"] .ds-table-link--edit {
    color: var(--ds-indigo-text-dark);
}
[data-theme="dark"] .ds-table-link--delete {
    color: var(--color-red-text-dark);
}

/* Alerts — background/border already dark-safe via the tokens above;
   text + icon still default to light-mode-tuned colors (some hardcoded,
   e.g. #991b1b) that read as near-invisible dark-on-dark, so brighten
   them to match their tint. */
[data-theme="dark"] .ds-alert--success     { color: var(--color-green-text-dark); }
[data-theme="dark"] .ds-alert--success svg { stroke: var(--color-green-text-dark); }
[data-theme="dark"] .ds-alert--error       { color: var(--color-red-text-dark); }
[data-theme="dark"] .ds-alert--error svg   { stroke: var(--color-red-text-dark); }
[data-theme="dark"] .ds-alert--warning     { color: var(--color-amber-text-dark); }
[data-theme="dark"] .ds-alert--warning svg { stroke: var(--color-amber-text-dark); }
[data-theme="dark"] .ds-alert--info        { color: var(--ds-indigo-text-dark); }
[data-theme="dark"] .ds-alert--info svg    { fill: var(--ds-indigo-text-dark); }

/* Banner / bulk-action bar — same dark-on-dark text problem as alerts */
[data-theme="dark"] .ds-banner,
[data-theme="dark"] .ds-banner p + p,
[data-theme="dark"] .ds-bulk-bar__count {
    color: var(--ds-indigo-text-dark);
}
[data-theme="dark"] .ds-banner svg {
    fill: var(--ds-indigo-text-dark);
}

/* Empty state icons */
[data-theme="dark"] .ds-empty__icon svg        { fill: var(--ds-indigo-text-dark); }
[data-theme="dark"] .ds-empty__icon--amber svg { fill: var(--color-amber-text-dark); }

/* Stat cards — accent border + value color need the brighter text variant */
[data-theme="dark"] .ds-stat-card--green,
[data-theme="dark"] .ds-stat-card--green .ds-stat-card__value {
    color: var(--color-green-text-dark);
    border-top-color: var(--color-green-text-dark);
}
[data-theme="dark"] .ds-stat-card--red,
[data-theme="dark"] .ds-stat-card--red .ds-stat-card__value {
    color: var(--color-red-text-dark);
    border-top-color: var(--color-red-text-dark);
}
[data-theme="dark"] .ds-stat-card--amber,
[data-theme="dark"] .ds-stat-card--amber .ds-stat-card__value {
    color: var(--color-amber-text-dark);
    border-top-color: var(--color-amber-text-dark);
}
[data-theme="dark"] .ds-stat-card--blue,
[data-theme="dark"] .ds-stat-card--blue .ds-stat-card__value {
    color: var(--ds-indigo-text-dark);
    border-top-color: var(--ds-indigo-text-dark);
}
/* .ds-stat-card--green/red/amber/blue::before backgrounds need no
   override here — they read the -light tokens above automatically. */

/* Danger button — background/border auto-fix via the tokens above */
[data-theme="dark"] .ds-btn--danger {
    color: var(--color-red-text-dark);
}
[data-theme="dark"] .ds-btn--danger:hover {
    color: var(--color-red-text-dark);
}

/* Small indigo pill button */
[data-theme="dark"] .ds-btn--pill-indigo {
    color: var(--ds-indigo-text-dark) !important;
}
[data-theme="dark"] .ds-btn--pill-indigo svg {
    stroke: var(--ds-indigo-text-dark);
}

/* Pills — background is driven entirely by the tokens above now, so no
   blanket background override is needed (a prior blanket rule here used
   to collapse every .ds-pill--* variant to the same flat slate; removed).
   Text just needs the brighter variant to stay readable on its tint. */
[data-theme="dark"] .ds-pill--green  { color: var(--color-green-text-dark); }
[data-theme="dark"] .ds-pill--red    { color: var(--color-red-text-dark); }
[data-theme="dark"] .ds-pill--amber  { color: var(--color-amber-text-dark); }
[data-theme="dark"] .ds-pill--blue   { color: var(--color-blue-text-dark); }
[data-theme="dark"] .ds-pill--purple { color: var(--color-purple-text-dark); }
[data-theme="dark"] .ds-pill--indigo { color: var(--ds-indigo-text-dark); }
/* .ds-pill--gray is untouched: --surface-subtle and --color-muted are
   already dark-safe, so it needs nothing extra. */

/* Tabs */
[data-theme="dark"] .ds-tab:hover,
[data-theme="dark"] .ds-tab.active,
[data-theme="dark"] .ds-tab[aria-selected="true"] {
    color: var(--ds-indigo-text-dark);
}
[data-theme="dark"] .ds-tab.active,
[data-theme="dark"] .ds-tab[aria-selected="true"] {
    border-bottom-color: var(--ds-indigo-text-dark);
}

/* Divider */
[data-theme="dark"] .ds-divider {
    background: var(--border-color);
}

/* Links */
[data-theme="dark"] .ds-link {
    color: var(--ds-indigo-text-dark);
}

/* Avatar */
[data-theme="dark"] .ds-avatar {
    background: var(--ds-indigo-light);
    color: var(--ds-indigo-chip-dark);
}