/**
 * PROJECT AI LAB — Core Design Tokens & Theme Variables
 * Light & Contemporary Palette with English (LTR) & Arabic (RTL) Support
 */

:root {
  /* Surface & Canvas Colors (Light, Warm, Premium) */
  --color-canvas: #FBFBFD;           /* Soft Ivory Primary Background */
  --color-canvas-subtle: #F8FAFC;    /* Refined Neutral Secondary Surface */
  --color-surface: #FFFFFF;          /* Pure Crisp White Card Surface */
  --color-surface-hover: #F8FAFC;    /* Elevated Hover Surface */
  --color-surface-active: #F1F5F9;   /* Depressed / Pressed Surface */

  /* Text & Typography Colors */
  --color-text-main: #0F172A;        /* Slate 900 (High contrast heading/body) */
  --color-text-body: #334155;        /* Slate 700 (Comfortable reading body) */
  --color-text-muted: #64748B;       /* Slate 500 (Subtitles, metadata, placeholders) */
  --color-text-subtle: #94A3B8;      /* Slate 400 (Dividers, borders, hints) */
  --color-text-inverted: #FFFFFF;    /* Text on dark surfaces */

  /* Primary Brand Accent (Cobalt Blue) */
  --color-brand-primary: #2563EB;
  --color-brand-primary-hover: #1D4ED8;
  --color-brand-primary-light: #EFF6FF;
  --color-brand-primary-border: #BFDBFE;

  /* Creative Neural Accent (Electric Violet) */
  --color-brand-creative: #7C3AED;
  --color-brand-creative-hover: #6D28D9;
  --color-brand-creative-light: #F5F3FF;
  --color-brand-creative-border: #DDD6FE;

  /* Emotional / Favorite Highlight (Soft Coral) */
  --color-brand-coral: #F43F5E;
  --color-brand-coral-hover: #E11D48;
  --color-brand-coral-light: #FFF1F2;
  --color-brand-coral-border: #FECDD3;

  /* Functional Status Colors */
  --color-status-success: #10B981;
  --color-status-success-bg: #ECFDF5;
  --color-status-success-border: #A7F3D0;

  --color-status-warning: #F59E0B;
  --color-status-warning-bg: #FFFBEB;
  --color-status-warning-border: #FDE68A;

  --color-status-danger: #EF4444;
  --color-status-danger-bg: #FEF2F2;
  --color-status-danger-border: #FECACA;

  --color-status-info: #0EA5E9;
  --color-status-info-bg: #F0F9FF;
  --color-status-info-border: #BAE6FD;

  /* AI Model Specific Palette */
  --color-model-chatgpt: #10A37F;
  --color-model-chatgpt-bg: #E8F7F2;
  --color-model-claude: #D97706;
  --color-model-claude-bg: #FEF3C7;
  --color-model-gemini: #2563EB;
  --color-model-gemini-bg: #EFF6FF;
  --color-model-midjourney: #6366F1;
  --color-model-midjourney-bg: #EEF2FF;
  --color-model-stablediff: #8B5CF6;
  --color-model-stablediff-bg: #F5F3FF;
  --color-model-dalle: #EC4899;
  --color-model-dalle-bg: #FDF2F8;

  /* Border & Line Colors */
  --color-border-subtle: #F1F5F9;
  --color-border: #E2E8F0;
  --color-border-hover: #CBD5E1;
  --color-border-focus: #2563EB;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 20px -3px rgba(37, 99, 235, 0.25);

  /* Corner Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Typography Scales */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Directional Root Variables (Updated via [dir="rtl"]) */
  --font-family-base: var(--font-en);
  --dir-factor: 1;
  --text-align-start: left;
  --text-align-end: right;
  --dir-chevron-next: rotate(0deg);
  --dir-chevron-prev: rotate(180deg);

  /* Transitions & Animation Timings */
  --anim-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --anim-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --anim-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --anim-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Touch & Mobile Viewport Tokens */
  --touch-target-min: 44px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* RTL Directional Switcher */
[dir="rtl"] {
  --font-family-base: var(--font-ar);
  --dir-factor: -1;
  --text-align-start: right;
  --text-align-end: left;
  --dir-chevron-next: rotate(180deg);
  --dir-chevron-prev: rotate(0deg);
}

/* Base Body Application */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-canvas);
  color: var(--color-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}