/* ==========================================================
   WHALE OS — Relate Visual Design System Tokens v3.5
   Design Reference: Relate (D:\DOWNLOADS\2.md)
   Light SaaS • Clean • Premium • Modern • Data-Dense • Arabic-First
   ========================================================== */

:root {
  /* Primitive Relate Color Palette */
  --color-snow-canvas: #fcfcfc;
  --color-lavender-wash: #f0f4fe;
  --color-midnight-ink: #020520;
  --color-graphite-body: #14141e;
  --color-slate-caption: #374151;
  --color-ash-helper: #6b7280;
  --color-stone-divider: #e2e8f0;
  --color-fog-surface: #f1f5f9;
  
  /* Sole Primary Brand Accent */
  --color-royal-signal: #145aff;
  --color-cobalt-glow: #3b82f6;
  
  /* Status Accents (Strictly for status dots & badges) */
  --color-mint-win: #16ca2e;       /* Green / Success / Active */
  --color-coral-lost: #f26052;     /* Red / Danger / Terminated / Error */
  --color-amber-pending: #ffa64d;  /* Orange / Warning / Pending */
  --color-azure-focus: #0099ff;    /* Pure blue focus ring */

  /* Neutral Base & Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Component Radii */
  --radius-cards: 12px;
  --radius-card-inner: 8px;
  --radius-containers: 24px;
  --radius-buttons: 9999px;
  --radius-inputs: 12px;
  --radius-badges: 100px;

  /* Spacing Scale (Compact density) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;

  /* Layout */
  --container-max: 1320px;
  --header-height: 64px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;

  /* Soft Multi-Layer Elevation (No harsh black borders, no heavy shadows) */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.08) 0px 0.36px 1.8px -1.4px, rgba(0, 0, 0, 0.07) 0px 1.37px 6.87px -2.8px;
  --shadow-card: rgba(0, 0, 0, 0.06) 0px 2px 8px -2px, rgba(0, 0, 0, 0.04) 0px 1px 4px -1px;
  --shadow-floating: rgba(0, 0, 0, 0.08) 0px 8px 24px -4px, rgba(0, 0, 0, 0.04) 0px 2px 8px -2px;
  --shadow-modal: rgba(2, 5, 32, 0.12) 0px 16px 48px -8px, rgba(2, 5, 32, 0.06) 0px 4px 16px -2px;
  --shadow-royal-glow: rgba(20, 90, 255, 0.16) 0px 8px 24px -4px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
   LIGHT MODE (Default & Primary Target)
   ========================================================== */
[data-theme="light"], :root:not([data-theme="dark"]) {
  --bg-primary: var(--color-snow-canvas);       /* #fcfcfc */
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--color-lavender-wash);    /* #f0f4fe */
  --bg-fog: var(--color-fog-surface);           /* #f1f5f9 */

  --surface: #ffffff;
  --surface-hover: #f7f9fe;
  --surface-active: #edf3ff;
  --surface-wash: var(--color-lavender-wash);

  --text-primary: var(--color-midnight-ink);    /* #020520 */
  --text-body: var(--color-graphite-body);      /* #14141e */
  --text-secondary: var(--color-slate-caption); /* #374151 */
  --text-muted: var(--color-ash-helper);        /* #6b7280 */

  --border: var(--color-stone-divider);         /* #e2e8f0 */
  --border-subtle: #edf2f7;
  --border-strong: #cbd5e1;

  --accent: var(--color-royal-signal);          /* #145aff */
  --accent-hover: #0f44cc;
  --accent-soft: rgba(20, 90, 255, 0.08);
  --accent-wash: var(--color-lavender-wash);

  --success: var(--color-mint-win);             /* #16ca2e */
  --success-soft: rgba(22, 202, 46, 0.1);
  --warning: var(--color-amber-pending);         /* #ffa64d */
  --warning-soft: rgba(255, 166, 77, 0.12);
  --danger: var(--color-coral-lost);            /* #f26052 */
  --danger-soft: rgba(242, 96, 82, 0.1);
  --info: var(--color-cobalt-glow);             /* #3b82f6 */
  --info-soft: rgba(59, 130, 246, 0.1);

  --header-bg: rgba(252, 252, 252, 0.94);
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: var(--color-stone-divider);
  --card-shadow: var(--shadow-card);

  --input-bg: #ffffff;
  --input-border: var(--color-stone-divider);
  --focus-ring: 0 0 0 3px rgba(0, 153, 255, 0.22);
  --focus-border: var(--color-azure-focus);

  --table-header-bg: #fcfcfc;
  --table-row-hover: #f8faff;
  --table-border: var(--color-stone-divider);

  --badge-bg: var(--accent-soft);
  --badge-text: var(--accent);
}

/* ==========================================================
   DARK MODE (Refined Midnight Cast)
   ========================================================== */
[data-theme="dark"] {
  --bg-primary: #070a18;
  --bg-secondary: #0c1126;
  --bg-tertiary: #111833;
  --bg-fog: #131b38;

  --surface: #0d132a;
  --surface-hover: #141c3d;
  --surface-active: #19244d;
  --surface-wash: #101938;

  --text-primary: #fcfcfc;
  --text-body: #e4e7f2;
  --text-secondary: #a3b0cc;
  --text-muted: #6f7e9f;

  --border: rgba(226, 232, 240, 0.12);
  --border-subtle: rgba(226, 232, 240, 0.08);
  --border-strong: rgba(226, 232, 240, 0.2);

  --accent: #2e6eff;
  --accent-hover: #4d83ff;
  --accent-soft: rgba(46, 110, 255, 0.18);
  --accent-wash: rgba(46, 110, 255, 0.12);

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.16);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, 0.16);
  --danger: #ff5252;
  --danger-soft: rgba(255, 82, 82, 0.16);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.16);

  --header-bg: rgba(7, 10, 24, 0.92);
  --sidebar-bg: #090e21;
  --card-bg: #0d132a;
  --card-border: var(--border);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

  --input-bg: #0a0f22;
  --input-border: var(--border);
  --focus-ring: 0 0 0 3px rgba(46, 110, 255, 0.3);
  --focus-border: var(--accent);

  --table-header-bg: #090e21;
  --table-row-hover: #121a3a;
  --table-border: var(--border);

  --badge-bg: var(--accent-soft);
  --badge-text: var(--accent);
}

/* ==========================================================
   Global Compatibility Aliases (Preserves all existing JS inline styles)
   ========================================================== */
:root {
  --page-bg: var(--bg-primary);
  --panel-bg: var(--surface);
  --panel-hover: var(--surface-hover);

  --button-primary-bg: var(--accent);
  --button-primary-text: #ffffff;
  --link: var(--accent);

  --table-header: var(--table-header-bg);
  --table-row-hover: var(--table-row-hover);

  --royal-blue: var(--color-royal-signal);
  --electric: var(--color-royal-signal);
}