/*
 * FILE: /td-os/core/td-dark.css
 * Purpose (EN): td-dark stylesheet for TDOS runtime.
 * مقصد (UR): TDOS runtime ke liye td-dark stylesheet.
 *
 * Version: v1.0.0
 *
 * Sections (Index)
 *  01) Implementation
 */

/* Assumptions:
   1) [data-td-theme="dark"] is applied to a high-level element (html or body) that scopes all TD-OS UI.
   2) /core/td-style.css is always loaded before this file so base tokens exist to override.
   3) All components consume only CSS variables (no hard-coded colors) and live in td-components.css.
   4) Legacy engines may still rely on the gray and shadow aliases; these must remain backwards compatible.
*/

/* =========================================================
   SECTION 01 — DARK TOKENS · COLORS & ROLES

   [EN] PURPOSE:
   • Define dark brand palette, neutrals, text roles, surfaces, borders.
   • Provide semantic colors, alerts, focus ring, scrollbar tokens for dark mode.
   • Components read these via CSS variables; no direct component styling here.

   [UR] مقصد:
   • Dark mode ke liye brand colors, neutrals, text roles, surfaces aur borders define karta hai۔
   • Semantic colors (success, warning, danger), alerts, focus ring aur scrollbar tokens yahin se aatay hain۔
   • Components inhi variables ko use karte hain; yahan se direct component styling nahi hoti۔
   ========================================================= */

/* Harden selector to html first (prepaint sets html attr earliest).
   Also keep [data-td-theme="dark"] fallback for safety. */
html[data-td-theme="dark"],
[data-td-theme="dark"] {
  /* Brand accents (dark) */
  --td-navy: #020617;
  --td-blue: #22d3ee;
  --td-blue-soft: #38bdf8;
  --td-blue-strong: #6366f1;
  --td-red: #fb7185;
  --td-white: #f9fafb;

  /* Brand roles */
  --td-brand-primary: var(--td-blue);
  --td-brand-primary-soft: rgba(56, 189, 248, 0.18);
  --td-brand-primary-strong: #38bdf8;
  --td-brand-shell: #020617;

  /* Neutrals (reused, safe for older screens) */
  --td-gray-050: #020617;
  --td-gray-075: #020617;
  --td-gray-100: #020617;
  --td-gray-200: #020617;
  --td-gray-300: #020617;
  --td-gray-400: #020617;
  --td-gray-500: #1f2937;
  --td-gray-600: #374151;
  --td-gray-700: #4b5563;
  --td-gray-800: #9ca3af;
  --td-gray-900: #e5e7eb;

  /* Text roles (match dark demo) */
  --td-text-main: #e5e7eb;
  --td-text-soft: #9ca3af;
  --td-text-soft-strong: #f9fafb;
  --td-text-muted: #9ca3af;
  --td-text-disabled: rgba(148, 163, 184, 0.75);

  /* Text role aliases */
  --td-text-title: var(--td-text-soft-strong);
  --td-text-heading: var(--td-text-soft-strong);
  --td-text-body: var(--td-text-main);
  --td-text-eyebrow: #94a3b8;
  --td-text-link: #7dd3fc;

  /* Surfaces (3 layers + band/rail glows) */
  --td-surface-page: #020617;
  --td-surface-shell: #020617;
  --td-surface-inner: #020617;
  --td-surface-elevated: #020617;
  --td-surface-subtle: rgba(15, 23, 42, 0.90);

  /* Aliases used in Master Components dark */
  --td-bg-page: #020617;
  --td-shell-bg: #020617;
  --td-surface-band:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), #020617 60%);
  --td-surface-rail:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.2), #020617 62%);

  /* Global layout/section roles (same naming as light) */
  --td-page-bg-main: var(--td-surface-page);
  --td-page-bg-soft: color-mix(
    in srgb,
    var(--td-surface-page) 82%,
    #020617 18%
  );

  --td-shell-bg-main: var(--td-surface-shell);
  --td-shell-bg-soft: color-mix(
    in srgb,
    var(--td-surface-shell) 70%,
    var(--td-surface-subtle) 30%
  );

  --td-section-bg-default: var(--td-surface-inner);
  --td-section-bg-muted: var(--td-surface-subtle);
  --td-section-bg-strong: color-mix(
    in srgb,
    var(--td-surface-inner) 75%,
    #020617 25%
  );

  /* Legacy / existing aliases — safe for old engines */
  --td-bg: var(--td-surface-page);
  --td-bg-deep: color-mix(in srgb, var(--td-surface-page) 70%, #000000 30%);
  --td-shell-subtle-bg: color-mix(
    in srgb,
    var(--td-surface-inner) 60%,
    var(--td-surface-subtle) 40%
  );
  --td-surface: var(--td-surface-shell);

  /* Borders (match dark band/rail cards) */
  --td-border-subtle: rgba(148, 163, 184, 0.38);
  --td-border-soft: rgba(148, 163, 184, 0.92);
  --td-border-strong: rgba(148, 163, 184, 0.98);
  --td-border-shell: rgba(15, 23, 42, 0.98);

  /* Semantic base colors */
  --td-semantic-danger: #fb7185;
  --td-semantic-danger-soft: rgba(248, 113, 113, 0.08);
  --td-semantic-success: #4ade80;
  --td-semantic-success-soft: rgba(34, 197, 94, 0.08);
  --td-semantic-warning: #facc15;
  --td-semantic-warning-soft: rgba(234, 179, 8, 0.12);

  /* Alerts — info/success/warning/danger (role tokens) */
  --td-alert-info-bg: rgba(37, 99, 235, 0.10);
  --td-alert-info-border: rgba(96, 165, 250, 0.50);
  --td-alert-info-text: #bfdbfe;

  --td-alert-success-bg: var(--td-semantic-success-soft);
  --td-alert-success-border: rgba(74, 222, 128, 0.55);
  --td-alert-success-text: var(--td-semantic-success);

  --td-alert-warning-bg: var(--td-semantic-warning-soft);
  --td-alert-warning-border: rgba(250, 204, 21, 0.55);
  --td-alert-warning-text: var(--td-semantic-warning);

  --td-alert-danger-bg: var(--td-semantic-danger-soft);
  --td-alert-danger-border: rgba(248, 113, 113, 0.55);
  --td-alert-danger-text: var(--td-semantic-danger);

  /* Generic alert alias (used by .td-alert) */
  --td-alert-bg: rgba(251, 191, 36, 0.10);
  --td-alert-border: rgba(251, 191, 36, 0.90);
  --td-alert-text: #facc15;

  /* Body background gradients in dark */
  --td-bg-grad-top: radial-gradient(
    circle at 12% 0%,
    rgba(56, 189, 248, 0.28),
    transparent 55%
  );
  --td-bg-grad-bottom: radial-gradient(
    circle at 88% 115%,
    rgba(15, 23, 42, 0.97),
    transparent 60%
  );

  /* Accent gradient (dark version) */
  --td-accent-gradient: linear-gradient(
    135deg,
    #22d3ee,
    #6366f1
  );

  /* Focus ring — tuned for dark */
  --td-focus-ring-color: rgba(56, 189, 248, 0.90);
  --td-focus-ring: 0 0 0 3px var(--td-focus-ring-color);

  /* Scrollbar tokens for dark (used by core scrollbar rules) */
  --td-scrollbar-track: rgba(15, 23, 42, 0.75);
  --td-scrollbar-thumb: rgba(148, 163, 184, 0.85);
  --td-scrollbar-thumb-hover: rgba(226, 232, 240, 0.95);

  /* Shell + card shadows (match Master Components dark) */
  --td-shadow-shell:
    0 46px 130px rgba(0, 0, 0, 0.97),
    0 0 0 1px rgba(15, 23, 42, 0.98),
    0 0 0 1px rgba(56, 189, 248, 0.18);
  --td-shadow-card-primary:
    0 32px 86px rgba(0, 0, 0, 0.97),
    0 0 0 1px rgba(15, 23, 42, 0.94),
    0 0 45px rgba(56, 189, 248, 0.18);
  --td-shadow-card-secondary:
    0 24px 70px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.88);

  /* Core shadow aliases (used by existing components) */
  --td-shadow-soft: var(--td-shadow-card-secondary);
  --td-shadow-card: var(--td-shadow-card-primary);
  --td-shadow-strong:
    0 40px 120px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(15, 23, 42, 0.98);
  --td-shadow-focus:
    0 0 0 1px rgba(56, 189, 248, 0.70);
}

/* =========================================================
   SECTION 02 — DARK TOKENS · COMPONENT OVERRIDES

   [EN] PURPOSE:
   • Override token values for buttons, inputs, pills, alerts, tables, tooltips under dark theme.
   • Visuals of components still live in td-components.css (class-based); this layer is token-only.

   [UR] مقصد:
   • Dark theme ke liye buttons, inputs, pills, alerts, tables, tooltips ke tokens override karta hai۔
   • Components ki classes ka styling td-components.css mein rehta hai; yahan sirf variables change hotay hain۔
   ========================================================= */

html[data-td-theme="dark"],
[data-td-theme="dark"] {
  /* ===== BUTTONS (primary dark) ===== */
  --td-btn-padding-y: 0.70rem;
  --td-btn-padding-x: 1.50rem;
  --td-btn-font-size: 0.94rem;

  --td-btn-bg: linear-gradient(140deg, #22d3ee, #6366f1);
  --td-btn-bg-hover: linear-gradient(140deg, #38bdf8, #818cf8);
  --td-btn-border: rgba(56, 189, 248, 0.98);
  --td-btn-text: #020617;

  --td-btn-shadow-rest:
    0 22px 60px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(56, 189, 248, 0.70);
  --td-btn-shadow-hover:
    0 30px 88px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(56, 189, 248, 1);
  --td-btn-shadow-active:
    0 18px 40px rgba(0, 0, 0, 0.98);

  --td-btn-focus-ring: var(--td-focus-ring);

  /* Outline / ghost (hardware feel) */
  --td-btn-outline-bg: rgba(15, 23, 42, 0.98);
  --td-btn-outline-border: rgba(148, 163, 184, 0.95);
  --td-btn-outline-bg-hover: rgba(15, 23, 42, 0.95);
  --td-btn-outline-text: #e5e7eb;

  --td-btn-ghost-bg: transparent;
  --td-btn-ghost-border: transparent;
  --td-btn-ghost-bg-hover: rgba(15, 23, 42, 0.90);
  --td-btn-ghost-text: #e5e7eb;

  /* Destructive buttons (dark) */
  --td-btn-danger-bg: linear-gradient(135deg, #b91c1c, #fb7185);
  --td-btn-danger-bg-hover: linear-gradient(135deg, #991b1b, #f97373);
  --td-btn-danger-text: #fef2f2;

  /* ===== INPUTS (fields) ===== */
  --td-input-radius: var(--td-radius-input);
  --td-input-bg: #020617;
  --td-input-bg-focus: #020617;
  --td-input-border: rgba(148, 163, 184, 0.90);
  --td-input-border-focus: rgba(56, 189, 248, 0.95);
  --td-input-text: #e5e7eb;
  --td-input-placeholder: rgba(148, 163, 184, 0.78);
  --td-input-focus-ring: rgba(56, 189, 248, 0.40);
  --td-input-shadow-focus:
    0 0 0 1px rgba(56, 189, 248, 0.65);
  --td-input-disabled-bg: rgba(15, 23, 42, 0.70);
  --td-input-disabled-text: var(--td-text-disabled);

  --td-label-text: #e5e7eb;
  --td-helper-text: #9ca3af;
  --td-error-text: var(--td-alert-danger-text);

  /* ===== TAGS / PILLS (status pills, rail pills, tags) ===== */
  --td-chip-bg: rgba(15, 23, 42, 0.98);
  --td-chip-text: #e5edf7;

  --td-pill-border: rgba(148, 163, 184, 0.75);
  --td-pill-primary-bg: rgba(15, 23, 42, 0.98);
  --td-pill-primary-text: #e5edf7;
  --td-pill-soft-bg: rgba(37, 99, 235, 0.55);
  --td-pill-soft-text: #e5e7eb;

  /* ===== TABLES (stripe/hover) ===== */
  --td-table-border: rgba(15, 23, 42, 0.98);
  --td-table-header-bg: rgba(15, 23, 42, 0.96);
  --td-table-header-text: #e5e7eb;
  --td-table-row-hover-bg: rgba(15, 23, 42, 0.85);
  --td-table-row-stripe-bg: rgba(15, 23, 42, 0.90);

  /* ===== TOOLTIPS ===== */
  --td-tooltip-bg: #020617;
  --td-tooltip-text: #e5edf7;
  --td-tooltip-border: rgba(148, 163, 184, 0.65);
  --td-tooltip-shadow:
    0 24px 50px rgba(0, 0, 0, 0.95);

  /* ===== CODE BLOCKS ===== */
  --td-code-bg: rgba(15, 23, 42, 0.95);
  --td-code-border: rgba(148, 163, 184, 0.60);
  --td-code-text: var(--td-text-body);
}

/* =========================================================
   SECTION 03 — SYSTEM-LEVEL OVERRIDES

   [EN] PURPOSE:
   • Apply browser-level hints for dark mode (color-scheme).
   • Define text selection color for dark theme.

   [UR] مقصد:
   • Browser ko batata hai ke yeh dark mode hai (color-scheme: dark)۔
   • Text selection ka rang dark theme ke mutabiq set karta hai۔
   ========================================================= */

html[data-td-theme="dark"],
[data-td-theme="dark"] {
  color-scheme: dark;
}

/* Text selection */
html[data-td-theme="dark"] ::selection,
[data-td-theme="dark"] ::selection {
  background: var(--td-brand-primary-soft);
  color: var(--td-white);
}