/* Generated by uiux-premium-cutover theme.mjs — direction "custom" (Atyaf Architectural Prism);
   accent oklch(0.49 0.19 355) / oklch(0.73 0.16 355); neutral hue 195;
   type Manrope + Manrope + IBM Plex Sans Arabic; radius sharp; elevation hairline.
   Keep `tokens-check.mjs` passing after any edit. */

:root {
  color-scheme: light;

  /* Surfaces — Soft, airy pearl-white canvas (#f9fafb) & pure white cards (#ffffff), zero green cast */
  --surface-canvas: oklch(0.985 0.002 260);
  --surface-card: oklch(1 0 0);
  --surface-subtle: oklch(0.975 0.002 260);
  --surface-inset: oklch(0.988 0.001 260);
  --surface-overlay: oklch(1 0 0 / 0.96);

  /* Text — four levels, all >= 4.6:1 on card, subtle, and inset */
  --text-primary: oklch(0.17 0.012 260);
  --text-secondary: oklch(0.42 0.012 260);
  --text-tertiary: oklch(0.50 0.010 260);
  --text-disabled: oklch(0.68 0.006 260);

  /* Borders — soft, delicate hairlines (#e6e8ec) + refined input boundaries */
  --border-subtle: oklch(0.17 0.012 260 / 0.06);
  --border-default: oklch(0.17 0.012 260 / 0.10);
  --border-strong: oklch(0.17 0.012 260 / 0.16);
  --border-input: oklch(0.17 0.012 260 / 0.14);
  --border-input-hover: oklch(0.17 0.012 260 / 0.24);
  --border-input-focus: oklch(0.49 0.19 355 / 0.50);
  --ring-input-focus: 0 0 0 3px oklch(0.49 0.19 355 / 0.10);

  /* Primary Accent — Atyaf Brand Rose-Crimson */
  --accent: oklch(0.49 0.19 355);
  --accent-hover: oklch(0.44 0.19 355);
  --accent-fg: oklch(0.99 0 0);
  --accent-bg: oklch(0.965 0.02 355);
  --accent-border: oklch(0.49 0.19 355 / 0.25);
  --focus-ring: var(--accent);

  /* Status — text-safe (>= 4.6:1 on card) and icon-safe (>= 3.1:1 on -bg) */
  --status-success: oklch(0.48 0.14 165);
  --status-success-bg: oklch(0.96 0.025 165);
  --status-warning: oklch(0.51 0.15 75);
  --status-warning-bg: oklch(0.965 0.04 75);
  --status-danger: oklch(0.52 0.20 25);
  --status-danger-bg: oklch(0.96 0.03 25);
  --status-info: oklch(0.46 0.14 240);
  --status-info-bg: oklch(0.96 0.025 240);

  /* Charts — categorical >= 3:1 on card, >= 30 deg apart */
  --chart-1: oklch(0.55 0.17 355);
  --chart-2: oklch(0.60 0.13 67);
  --chart-3: oklch(0.62 0.17 139);
  --chart-4: oklch(0.55 0.19 211);
  --chart-5: oklch(0.58 0.14 283);
  --chart-6: oklch(0.58 0.16 31);
  --chart-7: oklch(0.52 0.12 103);
  --chart-8: oklch(0.50 0.10 175);
  --chart-seq-start: oklch(0.93 0.04 355);
  --chart-seq-end: oklch(0.35 0.16 355);
  --chart-div-neg: oklch(0.55 0.19 25);
  --chart-div-mid: oklch(0.96 0.01 260);
  --chart-div-pos: oklch(0.50 0.15 250);

  /* Elevation — soft, diffused ambient shadows (no double border rings) */
  --elevation-card: 0 1px 3px 0 oklch(0.17 0.012 260 / 0.04), 0 1px 2px -1px oklch(0.17 0.012 260 / 0.03);
  --elevation-raised: 0 10px 25px -5px oklch(0.17 0.012 260 / 0.07), 0 4px 10px -2px oklch(0.17 0.012 260 / 0.04);
  --elevation-overlay: 0 20px 40px -10px oklch(0.17 0.012 260 / 0.14);

  /* Atyaf Brand Tokens (Pure Rose & Slate — zero green/mint) */
  --atyaf-ink: oklch(0.16 0.012 260);
  --atyaf-ink-raised: oklch(0.20 0.014 260);
  --atyaf-ink-subtle: oklch(0.24 0.015 260);
  --atyaf-ink-border: oklch(1 0 0 / 0.12);
  --atyaf-mint: var(--accent);
  --atyaf-mint-ink: var(--accent);
  --atyaf-mint-bg: var(--accent-bg);
  --atyaf-mint-border: var(--accent-border);
  --atyaf-mint-ring: 0 0 0 3px oklch(0.49 0.19 355 / 0.15);
  --atyaf-violet: oklch(0.54 0.16 285);
  --atyaf-violet-ink: oklch(0.45 0.16 285);
  --atyaf-violet-bg: oklch(0.96 0.025 285);
  --atyaf-violet-border: oklch(0.54 0.16 285 / 0.25);
  --atyaf-rose: oklch(0.55 0.20 355);
  --atyaf-prism-line: transparent;
  --atyaf-prism-wash: radial-gradient(at 0% 100%, oklch(0.60 0.21 355 / 0.05), transparent 50%);
  --atyaf-prism-wash-subtle: radial-gradient(at 0% 100%, oklch(0.60 0.21 355 / 0.03), transparent 50%);

  /* Atyaf Obsidian Header & Footer Shell Tokens */
  --shell-bg: #0f1117;
  --shell-topbar-bg: #0b0d12;
  --shell-nav-bg: #14171f;
  --shell-surface: #1a1e29;
  --shell-surface-hover: #232836;
  --shell-text: #f8f9fa;
  --shell-text-secondary: #e5e7eb;
  --shell-text-muted: #9ca3af;
  --shell-text-subtle: #8b95a5;
  --shell-border: oklch(1 0 0 / 0.10);
  --shell-border-subtle: oklch(1 0 0 / 0.06);
  --shell-border-control: oklch(1 0 0 / 0.18);
  --shell-border-strong: oklch(1 0 0 / 0.28);
  --shell-accent: #d81b60;
  --shell-accent-hover: #c2185b;
  --shell-accent-border: #e91e63;

  /* Typography — Manrope + IBM Plex Sans Arabic (clean human sans-serif everywhere) */
  --font-display: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-sans: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Type Scale — Strict SaaS Proportional Scale (12px -> 13px -> 14px -> 15px -> 17px -> 20px -> 22px) */
  --text-xs: 0.75rem;
  --text-label: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.375rem;
  --text-3xl: clamp(1.5rem, 2vw, 1.875rem);

  /* Component Dimension Standards */
  --control-height-sm: 32px;
  --control-height-md: 38px;
  --control-height-lg: 38px;
  --icon-size-sm: 0.8125rem;
  --icon-size-md: 0.9375rem;

  /* Spacing Scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Soft, Smooth Modern Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Motion & Z-Index Tokens */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-instant: 0ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* Compatibility Aliases */
  --bg-canvas: var(--surface-canvas);
  --bg-subtle: var(--surface-subtle);
  --bg-inset: var(--surface-inset);
  --surface-raised: var(--surface-card);
  --accent-primary: var(--accent);
  --accent-primary-hover: var(--accent-hover);
  --accent-primary-active: oklch(0.40 0.19 355);
  --accent-subtle: var(--accent-bg);
  --accent-contrast: var(--accent-fg);
  --status-success-subtle: var(--status-success-bg);
  --status-success-border: oklch(0.48 0.14 165 / 0.25);
  --status-warning-subtle: var(--status-warning-bg);
  --status-warning-border: oklch(0.51 0.15 75 / 0.25);
  --status-danger-subtle: var(--status-danger-bg);
  --status-danger-border: oklch(0.52 0.20 25 / 0.25);
  --status-info-subtle: var(--status-info-bg);
  --status-info-border: oklch(0.46 0.14 240 / 0.25);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — Deep Slate Obsidian (#0f1117 canvas, #161922 card, #1c202b subtle) */
  --surface-canvas: oklch(0.14 0.012 260);
  --surface-card: oklch(0.18 0.014 260);
  --surface-subtle: oklch(0.21 0.016 260);
  --surface-inset: oklch(0.15 0.012 260);
  --surface-overlay: oklch(0.22 0.016 260 / 0.96);

  /* Text — crisp off-white & cool slate hierarchy */
  --text-primary: oklch(0.96 0.005 260);
  --text-secondary: oklch(0.76 0.01 260);
  --text-tertiary: oklch(0.65 0.01 260);
  --text-disabled: oklch(0.44 0.008 260);

  /* Borders — soft obsidian hairlines */
  --border-subtle: oklch(1 0 0 / 0.06);
  --border-default: oklch(1 0 0 / 0.10);
  --border-strong: oklch(1 0 0 / 0.16);
  --border-input: oklch(1 0 0 / 0.14);
  --border-input-hover: oklch(1 0 0 / 0.22);
  --border-input-focus: oklch(0.73 0.16 355 / 0.55);
  --ring-input-focus: 0 0 0 3px oklch(0.73 0.16 355 / 0.14);

  /* Primary Accent — Luminous Atyaf Rose-Crimson on Dark Obsidian */
  --accent: oklch(0.73 0.16 355);
  --accent-hover: oklch(0.78 0.16 355);
  --accent-fg: oklch(0.13 0.012 260);
  --accent-bg: oklch(0.25 0.06 355);
  --accent-border: oklch(0.73 0.16 355 / 0.35);
  --focus-ring: var(--accent);

  /* Status — dark mode AA text & icon pairs */
  --status-success: oklch(0.75 0.14 165);
  --status-success-bg: oklch(0.22 0.05 165 / 0.55);
  --status-warning: oklch(0.80 0.15 75);
  --status-warning-bg: oklch(0.24 0.05 75 / 0.55);
  --status-danger: oklch(0.72 0.18 25);
  --status-danger-bg: oklch(0.23 0.06 25 / 0.55);
  --status-info: oklch(0.73 0.13 240);
  --status-info-bg: oklch(0.22 0.04 240 / 0.55);

  /* Charts */
  --chart-1: oklch(0.70 0.15 355);
  --chart-2: oklch(0.72 0.12 67);
  --chart-3: oklch(0.76 0.15 139);
  --chart-4: oklch(0.70 0.17 211);
  --chart-5: oklch(0.72 0.12 283);
  --chart-6: oklch(0.70 0.15 31);
  --chart-7: oklch(0.70 0.11 103);
  --chart-8: oklch(0.66 0.09 175);
  --chart-seq-start: oklch(0.30 0.05 355);
  --chart-seq-end: oklch(0.82 0.12 355);
  --chart-div-neg: oklch(0.70 0.17 25);
  --chart-div-mid: oklch(0.22 0.01 260);
  --chart-div-pos: oklch(0.70 0.13 250);

  /* Elevation */
  --elevation-card: 0 2px 6px 0 oklch(0 0 0 / 0.25);
  --elevation-raised: 0 10px 24px -6px oklch(0 0 0 / 0.45);
  --elevation-overlay: 0 18px 40px -6px oklch(0 0 0 / 0.60);

  /* Atyaf Brand Tokens in Dark Mode (Zero green/mint) */
  --atyaf-mint: var(--accent);
  --atyaf-mint-ink: var(--accent);
  --atyaf-mint-bg: var(--accent-bg);
  --atyaf-violet: oklch(0.74 0.16 285);
  --atyaf-violet-ink: oklch(0.78 0.14 285);
  --atyaf-violet-bg: oklch(0.24 0.06 285 / 0.45);
  --atyaf-prism-line: transparent;
  --atyaf-prism-wash: radial-gradient(at 0% 100%, oklch(0.60 0.21 355 / 0.08), transparent 52%);
  --atyaf-prism-wash-subtle: radial-gradient(at 0% 100%, oklch(0.60 0.21 355 / 0.05), transparent 50%);

  /* Compatibility Aliases */
  --bg-canvas: var(--surface-canvas);
  --bg-subtle: var(--surface-subtle);
  --bg-inset: var(--surface-inset);
  --surface-raised: var(--surface-subtle);
  --accent-primary: var(--accent);
  --accent-primary-hover: var(--accent-hover);
  --accent-primary-active: oklch(0.82 0.15 355);
  --accent-subtle: var(--accent-bg);
  --accent-contrast: var(--accent-fg);
  --status-success-subtle: var(--status-success-bg);
  --status-success-border: oklch(0.75 0.14 165 / 0.30);
  --status-warning-subtle: var(--status-warning-bg);
  --status-warning-border: oklch(0.80 0.15 75 / 0.30);
  --status-danger-subtle: var(--status-danger-bg);
  --status-danger-border: oklch(0.72 0.18 25 / 0.30);
  --status-info-subtle: var(--status-info-bg);
  --status-info-border: oklch(0.73 0.13 240 / 0.30);
}

/* Language, not direction, decides letter-spacing and typeface */
:lang(ar),
[dir="rtl"],
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

:lang(ar) {
  --font-sans: var(--font-arabic);
  --font-display: var(--font-arabic);
}

html {
  font-optical-sizing: auto;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
}

@media (forced-colors: active) {
  .btn,
  button,
  input,
  select,
  textarea {
    border: 1px solid ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}