/**
 * WastHub ERP — Global Design Foundation
 *
 * Runtime contract:
 * - Loaded by assets/js/loader.js for the unified shell or the full UI.
 * - On shell-only pages it follows legacy CSS and supplies tokens only.
 * - Contains foundation tokens and direction/language rules only.
 * - Must not define legacy selectors such as .btn, .card, .table, or .modal.
 *
 * Phase 2 shared components must use the .wh-* namespace and consume --wh-* tokens.
 */

/* ========================================================================== 
   1. Primitive and semantic tokens — opt-in scope only
   ========================================================================== */

html:is([data-wast-ui], [data-wh-shell]) {
  color-scheme: light;

  /* Brand primitives */
  --wh-color-indigo-50: #eef2ff;
  --wh-color-indigo-100: #e0e7ff;
  --wh-color-indigo-200: #c7d2fe;
  --wh-color-indigo-300: #a5b4fc;
  --wh-color-indigo-400: #818cf8;
  --wh-color-indigo-500: #6366f1;
  --wh-color-indigo-600: #4f46e5;
  --wh-color-indigo-700: #4338ca;
  --wh-color-indigo-800: #3730a3;
  --wh-color-indigo-900: #312e81;

  --wh-color-teal-50: #f0fdfa;
  --wh-color-teal-100: #ccfbf1;
  --wh-color-teal-500: #00a6a6;
  --wh-color-teal-600: #0d9488;
  --wh-color-teal-700: #0f766e;

  --wh-color-green-50: #ecfdf5;
  --wh-color-green-100: #d1fae5;
  --wh-color-green-500: #10b981;
  --wh-color-green-600: #059669;
  --wh-color-green-700: #047857;

  --wh-color-amber-50: #fffbeb;
  --wh-color-amber-100: #fef3c7;
  --wh-color-amber-500: #f59e0b;
  --wh-color-amber-600: #d97706;
  --wh-color-amber-800: #92400e;

  --wh-color-red-50: #fef2f2;
  --wh-color-red-100: #fee2e2;
  --wh-color-red-500: #ef4444;
  --wh-color-red-600: #dc2626;
  --wh-color-red-700: #b91c1c;

  --wh-color-blue-50: #eff6ff;
  --wh-color-blue-100: #dbeafe;
  --wh-color-blue-500: #3b82f6;
  --wh-color-blue-700: #1d4ed8;

  /* Neutral primitives */
  --wh-color-neutral-0: #ffffff;
  --wh-color-neutral-50: #f8fafc;
  --wh-color-neutral-100: #f1f5f9;
  --wh-color-neutral-200: #e2e8f0;
  --wh-color-neutral-300: #cbd5e1;
  --wh-color-neutral-400: #94a3b8;
  --wh-color-neutral-500: #64748b;
  --wh-color-neutral-600: #475569;
  --wh-color-neutral-700: #334155;
  --wh-color-neutral-800: #1e293b;
  --wh-color-neutral-900: #0f172a;
  --wh-color-neutral-950: #020617;

  /* Action semantics */
  --wh-color-action-primary: var(--wh-color-indigo-500);
  --wh-color-action-primary-hover: var(--wh-color-indigo-600);
  --wh-color-action-primary-pressed: var(--wh-color-indigo-700);
  --wh-color-action-primary-subtle: var(--wh-color-indigo-50);
  --wh-color-action-accent: var(--wh-color-teal-500);
  --wh-color-action-accent-hover: var(--wh-color-teal-600);
  --wh-color-action-danger: var(--wh-color-red-500);
  --wh-color-action-danger-hover: var(--wh-color-red-600);

  /* Status semantics. Business status mapping is added in Phase 2. */
  --wh-color-status-positive: var(--wh-color-green-700);
  --wh-color-status-positive-surface: var(--wh-color-green-50);
  --wh-color-status-progress: var(--wh-color-blue-700);
  --wh-color-status-progress-surface: var(--wh-color-blue-50);
  --wh-color-status-waiting: var(--wh-color-amber-800);
  --wh-color-status-waiting-surface: var(--wh-color-amber-50);
  --wh-color-status-warning: var(--wh-color-amber-800);
  --wh-color-status-warning-surface: var(--wh-color-amber-100);
  --wh-color-status-negative: var(--wh-color-red-700);
  --wh-color-status-negative-surface: var(--wh-color-red-50);
  --wh-color-status-info: var(--wh-color-blue-700);
  --wh-color-status-info-surface: var(--wh-color-blue-50);
  --wh-color-status-inactive: var(--wh-color-neutral-600);
  --wh-color-status-inactive-surface: var(--wh-color-neutral-100);
  --wh-color-status-urgent: var(--wh-color-neutral-0);
  --wh-color-status-urgent-surface: var(--wh-color-red-500);

  /* Surface and text semantics — light theme */
  --wh-color-surface-page: var(--wh-color-neutral-50);
  --wh-color-surface-card: var(--wh-color-neutral-0);
  --wh-color-surface-subtle: var(--wh-color-neutral-100);
  --wh-color-surface-elevated: var(--wh-color-neutral-0);
  --wh-color-surface-overlay: rgb(15 23 42 / 55%);
  --wh-color-text-primary: var(--wh-color-neutral-900);
  --wh-color-text-secondary: var(--wh-color-neutral-600);
  --wh-color-text-muted: var(--wh-color-neutral-500);
  --wh-color-text-disabled: var(--wh-color-neutral-400);
  --wh-color-text-on-primary: var(--wh-color-neutral-0);
  --wh-color-border-default: var(--wh-color-neutral-200);
  --wh-color-border-strong: var(--wh-color-neutral-300);
  --wh-color-border-interactive: var(--wh-color-indigo-500);
  --wh-color-border-error: var(--wh-color-red-500);
  --wh-color-focus-ring: rgb(99 102 241 / 28%);

  /* Typography */
  --wh-font-family-ar: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --wh-font-family-en: "Segoe UI", Inter, Arial, sans-serif;
  --wh-font-family-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --wh-font-family-body: var(--wh-font-family-ar);
  --wh-font-size-2xs: 0.6875rem;
  --wh-font-size-xs: 0.75rem;
  --wh-font-size-sm: 0.8125rem;
  --wh-font-size-md: 0.875rem;
  --wh-font-size-lg: 1rem;
  --wh-font-size-xl: 1.125rem;
  --wh-font-size-2xl: 1.25rem;
  --wh-font-size-3xl: 1.5rem;
  --wh-font-size-4xl: 1.875rem;
  --wh-font-weight-regular: 400;
  --wh-font-weight-medium: 500;
  --wh-font-weight-semibold: 600;
  --wh-font-weight-bold: 700;
  --wh-line-height-tight: 1.35;
  --wh-line-height-control: 1.5;
  --wh-line-height-body: 1.7;

  /* Spacing — 4px base */
  --wh-space-0: 0;
  --wh-space-1: 0.25rem;
  --wh-space-2: 0.5rem;
  --wh-space-3: 0.75rem;
  --wh-space-4: 1rem;
  --wh-space-5: 1.25rem;
  --wh-space-6: 1.5rem;
  --wh-space-8: 2rem;
  --wh-space-10: 2.5rem;
  --wh-space-12: 3rem;
  --wh-space-16: 4rem;

  /* Radius and borders */
  --wh-radius-none: 0;
  --wh-radius-sm: 0.375rem;
  --wh-radius-md: 0.5rem;
  --wh-radius-lg: 0.625rem;
  --wh-radius-xl: 0.75rem;
  --wh-radius-2xl: 1rem;
  --wh-radius-full: 9999px;
  --wh-border-width-default: 1px;
  --wh-border-width-strong: 2px;

  /* Elevation */
  --wh-elevation-0: none;
  --wh-elevation-1: 0 1px 2px rgb(15 23 42 / 6%);
  --wh-elevation-2: 0 4px 12px rgb(15 23 42 / 8%);
  --wh-elevation-3: 0 12px 28px rgb(15 23 42 / 12%);
  --wh-elevation-4: 0 20px 48px rgb(15 23 42 / 18%);

  /* Focus */
  --wh-focus-ring-width: 3px;
  --wh-focus-ring-offset: 2px;
  --wh-focus-ring: 0 0 0 var(--wh-focus-ring-width) var(--wh-color-focus-ring);

  /* Controls and density */
  --wh-control-height-compact: 2rem;
  --wh-control-height-comfortable: 2.75rem;
  --wh-control-height-touch: 3rem;
  --wh-control-height: var(--wh-control-height-comfortable);
  --wh-control-padding-block: var(--wh-space-2);
  --wh-control-padding-inline: var(--wh-space-3);
  --wh-row-height-compact: 2.5rem;
  --wh-row-height-comfortable: 3rem;
  --wh-row-height-touch: 3.5rem;
  --wh-row-height: var(--wh-row-height-comfortable);

  /* Responsive reference tokens. CSS media queries still use literal values. */
  --wh-breakpoint-mobile: 30rem;
  --wh-breakpoint-tablet: 48rem;
  --wh-breakpoint-laptop: 64rem;
  --wh-breakpoint-desktop: 80rem;
  --wh-breakpoint-wide: 90rem;

  /* Motion */
  --wh-duration-instant: 0ms;
  --wh-duration-fast: 120ms;
  --wh-duration-normal: 200ms;
  --wh-duration-slow: 320ms;
  --wh-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --wh-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* Layer system */
  --wh-z-base: 0;
  --wh-z-sticky: 100;
  --wh-z-sidebar: 200;
  --wh-z-topbar: 300;
  --wh-z-dropdown: 500;
  --wh-z-drawer: 700;
  --wh-z-modal: 800;
  --wh-z-toast: 900;
  --wh-z-tooltip: 1000;

  /* App shell */
  --wh-sidebar-width: 17.5rem;
  --wh-sidebar-width-collapsed: 4.375rem;
  --wh-topbar-height: 4rem;
  --wh-page-padding-inline: var(--wh-space-6);
  --wh-page-padding-block: var(--wh-space-6);
  --wh-page-max-width: 100%;
}

/* ========================================================================== 
   2. Themes
   ========================================================================== */

html:is([data-wast-ui], [data-wh-shell])[data-theme="dark"] {
  color-scheme: dark;
  --wh-color-surface-page: var(--wh-color-neutral-950);
  --wh-color-surface-card: var(--wh-color-neutral-900);
  --wh-color-surface-subtle: var(--wh-color-neutral-800);
  --wh-color-surface-elevated: var(--wh-color-neutral-800);
  --wh-color-surface-overlay: rgb(2 6 23 / 72%);
  --wh-color-text-primary: var(--wh-color-neutral-100);
  --wh-color-text-secondary: var(--wh-color-neutral-300);
  --wh-color-text-muted: var(--wh-color-neutral-400);
  --wh-color-text-disabled: var(--wh-color-neutral-500);
  --wh-color-border-default: var(--wh-color-neutral-700);
  --wh-color-border-strong: var(--wh-color-neutral-600);
  --wh-color-focus-ring: rgb(129 140 248 / 38%);
  --wh-color-action-primary-subtle: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-action-primary));
  --wh-color-status-positive: var(--wh-color-green-500);
  --wh-color-status-positive-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-green-500));
  --wh-color-status-progress: var(--wh-color-blue-500);
  --wh-color-status-progress-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-blue-500));
  --wh-color-status-waiting: var(--wh-color-amber-500);
  --wh-color-status-waiting-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-amber-500));
  --wh-color-status-warning: var(--wh-color-amber-500);
  --wh-color-status-warning-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-amber-500));
  --wh-color-status-negative: var(--wh-color-red-500);
  --wh-color-status-negative-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-red-500));
  --wh-color-status-info: var(--wh-color-blue-500);
  --wh-color-status-info-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-blue-500));
  --wh-color-status-inactive: var(--wh-color-neutral-400);
  --wh-color-status-inactive-surface: color-mix(in srgb, var(--wh-color-surface-card) 82%, var(--wh-color-neutral-500));
  --wh-elevation-1: 0 1px 2px rgb(0 0 0 / 22%);
  --wh-elevation-2: 0 4px 12px rgb(0 0 0 / 30%);
  --wh-elevation-3: 0 12px 28px rgb(0 0 0 / 38%);
  --wh-elevation-4: 0 20px 48px rgb(0 0 0 / 48%);
}

/* ========================================================================== 
   3. Language, direction, and international content
   ========================================================================== */

html:is([data-wast-ui], [data-wh-shell])[lang="ar"] {
  --wh-font-family-body: var(--wh-font-family-ar);
}

html:is([data-wast-ui], [data-wh-shell])[lang="en"] {
  --wh-font-family-body: var(--wh-font-family-en);
}

html[data-wast-ui],
html[data-wast-ui] body,
html[data-wast-ui] button,
html[data-wast-ui] input,
html[data-wast-ui] select,
html[data-wast-ui] textarea {
  font-family: var(--wh-font-family-body);
}

html[data-wast-ui] body {
  text-align: start;
}

html[data-wast-ui][dir="rtl"] {
  direction: rtl;
}

html[data-wast-ui][dir="ltr"] {
  direction: ltr;
}

/* Only icons explicitly marked as directional are mirrored. */
html[data-wast-ui][dir="rtl"] [data-wh-directional-icon] {
  transform: scaleX(-1);
}

html[data-wast-ui][dir="ltr"] [data-wh-directional-icon] {
  transform: none;
}

/* Numbers, dates, currencies, phones, and identifiers retain readable order. */
html[data-wast-ui] :where(
  [data-wh-format="number"],
  [data-wh-format="date"],
  [data-wh-format="currency"],
  [data-wh-format="phone"],
  [data-wh-format="identifier"]
) {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
}

html[data-wast-ui] [data-wh-align="start"] { text-align: start; }
html[data-wast-ui] [data-wh-align="end"] { text-align: end; }
html[data-wast-ui] [data-wh-align="center"] { text-align: center; }

/* ========================================================================== 
   4. Foundation accessibility and user preferences
   ========================================================================== */

html[data-wast-ui] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--wh-border-width-strong) solid var(--wh-color-border-interactive);
  outline-offset: var(--wh-focus-ring-offset);
}

html[data-wast-ui][data-density="compact"] {
  --wh-control-height: var(--wh-control-height-compact);
  --wh-row-height: var(--wh-row-height-compact);
  --wh-control-padding-block: var(--wh-space-1);
  --wh-control-padding-inline: var(--wh-space-2);
}

html[data-wast-ui][data-density="touch"] {
  --wh-control-height: var(--wh-control-height-touch);
  --wh-row-height: var(--wh-row-height-touch);
  --wh-control-padding-block: var(--wh-space-3);
  --wh-control-padding-inline: var(--wh-space-4);
}

@media (max-width: 48rem), (pointer: coarse) {
  html[data-wast-ui] {
    --wh-control-height: var(--wh-control-height-touch);
    --wh-row-height: var(--wh-row-height-touch);
    --wh-page-padding-inline: var(--wh-space-4);
    --wh-page-padding-block: var(--wh-space-4);
  }
}

@media (max-width: 30rem) {
  html[data-wast-ui] {
    --wh-page-padding-inline: var(--wh-space-3);
    --wh-page-padding-block: var(--wh-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wast-ui] {
    --wh-duration-fast: 0ms;
    --wh-duration-normal: 0ms;
    --wh-duration-slow: 0ms;
  }
}