/*
 * رموز التصميم — منقولة من نظام تصميم SocialHarvester Control Center
 * Obsidian Dark (#0B0F17 / #111827) و Ceramic Light (#F8FAFC / #FFFFFF)، لون مميز Cyan
 */
:root {
  --font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.80rem + 0.12vw, 0.88rem);
  --text-base: clamp(0.92rem, 0.90rem + 0.15vw, 1.00rem);
  --text-md: clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
  --text-lg: clamp(1.20rem, 1.12rem + 0.40vw, 1.38rem);
  --text-xl: clamp(1.40rem, 1.28rem + 0.60vw, 1.70rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 1.00vw, 2.25rem);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --platform-x: #1D9BF0;
  --platform-x-verify: #00BA7C;

  --duration-fast: 160ms;
  --duration-normal: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-palette: 700;

  --sidebar-w: 272px;
  --sidebar-w-collapsed: 76px;
}

/* ── Obsidian Dark (الافتراضي) ── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0B0F17;
  --bg-surface: #111827;
  --bg-elevated: #1A2234;
  --bg-overlay: #1F293E;
  --bg-subtle: rgba(255, 255, 255, 0.04);
  --bg-muted: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(2, 6, 23, 0.55);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-disabled: #334155;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --accent: #06B6D4;
  --accent-hover: #22D3EE;
  --accent-strong: #0891B2;
  --accent-text: #67E8F9;
  --accent-subtle: rgba(6, 182, 212, 0.12);
  --accent-border: rgba(34, 211, 238, 0.30);
  --accent-fg: #0B0F17;

  --ok: #10B981;
  --ok-text: #34D399;
  --ok-subtle: rgba(16, 185, 129, 0.12);
  --ok-border: rgba(16, 185, 129, 0.30);
  --warn: #F59E0B;
  --warn-text: #FBBF24;
  --warn-subtle: rgba(245, 158, 11, 0.12);
  --warn-border: rgba(245, 158, 11, 0.30);
  --err: #EF4444;
  --err-text: #F87171;
  --err-subtle: rgba(239, 68, 68, 0.12);
  --err-border: rgba(239, 68, 68, 0.30);
  --info-text: #38BDF8;
  --purple-text: #C084FC;
  --purple-subtle: rgba(168, 85, 247, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --shadow-xl: 0 24px 50px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-bento: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 32px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-accent: 0 0 24px -4px rgba(6, 182, 212, 0.35);
  --glow-card-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.75), 0 0 24px -4px rgba(6, 182, 212, 0.22);
  --hero-gradient: radial-gradient(120% 140% at 100% 0%, rgba(6, 182, 212, 0.16) 0%, rgba(17, 24, 39, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(29, 155, 240, 0.10) 0%, rgba(17, 24, 39, 0) 60%);
  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent);
  --scrim: rgba(0, 0, 0, 0.70);
  --banner-bg: linear-gradient(90deg, #064E3B, #0B3B37);
}

/* ── Ceramic Light ── */
[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --bg-muted: #E2E8F0;
  --bg-input: #FFFFFF;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-disabled: #CBD5E1;

  --border-subtle: #EEF2F6;
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;

  --accent: #0891B2;
  --accent-hover: #0E7490;
  --accent-strong: #0891B2;
  --accent-text: #0E7490;
  --accent-subtle: rgba(8, 145, 178, 0.09);
  --accent-border: rgba(8, 145, 178, 0.30);
  --accent-fg: #FFFFFF;

  --ok: #059669;
  --ok-text: #047857;
  --ok-subtle: rgba(5, 150, 105, 0.09);
  --ok-border: rgba(5, 150, 105, 0.28);
  --warn: #D97706;
  --warn-text: #B45309;
  --warn-subtle: rgba(217, 119, 6, 0.10);
  --warn-border: rgba(217, 119, 6, 0.28);
  --err: #DC2626;
  --err-text: #B91C1C;
  --err-subtle: rgba(220, 38, 38, 0.08);
  --err-border: rgba(220, 38, 38, 0.26);
  --info-text: #0369A1;
  --purple-text: #6D28D9;
  --purple-subtle: rgba(124, 58, 237, 0.08);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 30px -6px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-bento: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --glow-accent: 0 6px 18px -6px rgba(8, 145, 178, 0.45);
  --glow-card-hover: 0 12px 28px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(8, 145, 178, 0.18);
  --hero-gradient: radial-gradient(120% 140% at 100% 0%, rgba(8, 145, 178, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(29, 155, 240, 0.06) 0%, rgba(255, 255, 255, 0) 60%);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);
  --scrim: rgba(15, 23, 42, 0.45);
  --banner-bg: linear-gradient(90deg, #065F46, #0F766E);
}