/* ==========================================================================
   Rastify Design System & Brand Identity Tokens (rastify.ir)
   Palette: Deep Persian Blue (#1A3673) & Vibrant Modern Purple (#8B24A6)
   Typography: Vazirmatn (Persian RTL) & Poppins (English LTR)
   ========================================================================== */

:root {
  /* Typography */
  --font-persian: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-english: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Scales */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.84rem;    /* 13.5px */
  --text-base: 0.95rem;  /* 15.2px */
  --text-md: 1.05rem;    /* 16.8px */
  --text-lg: 1.18rem;    /* 19px */
  --text-xl: 1.35rem;    /* 21.6px */
  --text-2xl: 1.65rem;   /* 26.4px */
  --text-3xl: 2.1rem;    /* 33.6px */
  --text-4xl: 2.6rem;    /* 41.6px */

  /* Line Heights for Persian Typography */
  --leading-tight: 1.35;
  --leading-snug: 1.55;
  --leading-normal: 1.8;
  --leading-relaxed: 1.95;
  --leading-loose: 2.2;

  /* Transitions */
  --transition-fast: 140ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 18px -2px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.16), 0 6px 14px -2px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 24px 50px -8px rgba(15, 23, 42, 0.24), 0 12px 24px -4px rgba(15, 23, 42, 0.14);
  --shadow-dropdown: 0 18px 38px -4px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--color-border);
  --shadow-glow: 0 0 28px rgba(139, 36, 166, 0.38);
  --shadow-primary-glow: 0 0 28px rgba(26, 54, 115, 0.4);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout Dimensions */
  --header-height: 58px;
  --toolbar-height: 44px;
  --statusbar-height: 32px;
  --sidebar-width: 320px;

  /* Brand Colors (Rastify Core) */
  --brand-blue: #1A3673;      /* Deep Persian Blue */
  --brand-purple: #8B24A6;    /* Vibrant Modern Purple */
  --brand-indigo: #4A2E8F;    /* Harmonious Mid-tone */
  --brand-gradient: linear-gradient(135deg, #1A3673 0%, #4A2E8F 50%, #8B24A6 100%);
  --brand-gradient-hover: linear-gradient(135deg, #122552 0%, #3e2479 50%, #731c8a 100%);
  --brand-gradient-glow: rgba(139, 36, 166, 0.35);
  --brand-blue-glow: rgba(26, 54, 115, 0.35);
}

/* ==========================================================================
   Light Theme (Rastify Pristine Canvas - #F8F9FA to #FFFFFF)
   ========================================================================== */
[data-theme="light"] {
  --color-bg-base: #F8F9FA;          /* Clean light gray canvas */
  --color-bg-surface: #FFFFFF;       /* Pure white surface */
  --color-bg-elevated: #F1F3F5;      /* Elevated layer */
  --color-bg-hover: #E9ECEF;
  --color-bg-active: #DEE2E6;
  --color-bg-glass: rgba(255, 255, 255, 0.88);
  --color-bg-subtle: rgba(26, 54, 115, 0.03);
  --color-backdrop: rgba(15, 23, 42, 0.55);

  --color-border: #E2E8F0;
  --color-border-subtle: #EDF2F7;
  --color-border-strong: #CBD5E1;
  --color-border-focus: #1A3673;

  --color-text-primary: #0F172A;     /* Dark Navy/Slate for optimal contrast */
  --color-text-secondary: #334155;
  --color-text-muted: #64748B;
  --color-text-subtle: #94A3B8;
  --color-text-inverse: #FFFFFF;

  /* Accent Branding */
  --color-primary: #1A3673;           /* Deep Persian Blue */
  --color-primary-hover: #122552;
  --color-primary-active: #0D1C3E;
  --color-primary-light: rgba(26, 54, 115, 0.08);
  --color-primary-glow: rgba(26, 54, 115, 0.22);

  --color-secondary: #8B24A6;         /* Vibrant Modern Purple */
  --color-secondary-hover: #731C8A;
  --color-secondary-active: #5E1470;
  --color-secondary-light: rgba(139, 36, 166, 0.08);
  --color-secondary-glow: rgba(139, 36, 166, 0.22);

  --color-accent-gradient: var(--brand-gradient);
  --color-primary-gradient: linear-gradient(135deg, #1A3673 0%, #2B57B2 100%);

  /* Status Colors */
  --color-success: #059669;
  --color-success-bg: rgba(5, 150, 105, 0.08);
  --color-warning: #D97706;
  --color-warning-bg: rgba(217, 119, 6, 0.08);
  --color-danger: #E11D48;
  --color-danger-bg: rgba(225, 29, 72, 0.08);
  --color-info: #0284C7;
  --color-info-bg: rgba(2, 132, 199, 0.08);

  /* Markdown Preview Surfaces */
  --md-bg: #FFFFFF;
  --md-text: #1E293B;
  --md-headings: #0F172A;
  --md-code-bg: #F8FAFC;
  --md-code-border: #E2E8F0;
  --md-code-header-bg: #EDF2F7;
  --md-inline-code-bg: rgba(139, 36, 166, 0.07);
  --md-inline-code-color: #8B24A6;
  --md-table-border: #E2E8F0;
  --md-table-stripe: #F8FAFC;
  --md-table-hover: rgba(26, 54, 115, 0.04);
  --md-quote-border: #1A3673;
  --md-quote-bg: rgba(26, 54, 115, 0.04);
  --md-hr-color: #E2E8F0;
  --md-kbd-bg: #F1F5F9;
  --md-kbd-border: #CBD5E1;

  /* Syntax Highlighting Tokens (Light Mode) */
  --hljs-text: #1F2328;
  --hljs-comment: #57606A;
  --hljs-keyword: #CF222E;
  --hljs-attr: #0550AE;
  --hljs-string: #0A3069;
  --hljs-number: #0550AE;
  --hljs-literal: #116329;
  --hljs-title: #8B24A6;
  --hljs-built-in: #953800;
  --hljs-tag: #116329;
}

/* ==========================================================================
   Dark Theme (Rastify Deep Space & Midnight Navy)
   ========================================================================== */
[data-theme="dark"] {
  --color-bg-base: #0B1120;          /* Deepest obsidian navy */
  --color-bg-surface: #111A30;       /* Surface midnight */
  --color-bg-elevated: #18233F;      /* Elevated layer */
  --color-bg-hover: #212E52;         /* Hover state */
  --color-bg-active: #2B3B66;
  --color-bg-glass: rgba(17, 26, 48, 0.86);
  --color-bg-subtle: rgba(255, 255, 255, 0.04);
  --color-backdrop: rgba(6, 10, 20, 0.78);

  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-focus: #4F80E1;

  --color-text-primary: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #8292AD;
  --color-text-subtle: #566785;
  --color-text-inverse: #0B1120;

  /* Accent Branding */
  --color-primary: #3B82F6;           /* Electric Persian Blue */
  --color-primary-hover: #2563EB;
  --color-primary-active: #1D4ED8;
  --color-primary-light: rgba(59, 130, 246, 0.16);
  --color-primary-glow: rgba(59, 130, 246, 0.35);

  --color-secondary: #C084FC;         /* Luminous Purple */
  --color-secondary-hover: #A855F7;
  --color-secondary-active: #9333EA;
  --color-secondary-light: rgba(192, 132, 252, 0.16);
  --color-secondary-glow: rgba(192, 132, 252, 0.35);

  --color-accent-gradient: linear-gradient(135deg, #3B82F6 0%, #9333EA 50%, #EC4899 100%);
  --color-primary-gradient: linear-gradient(135deg, #1A3673 0%, #8B24A6 100%);

  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger: #F43F5E;
  --color-danger-bg: rgba(244, 63, 94, 0.12);
  --color-info: #0EA5E9;
  --color-info-bg: rgba(14, 165, 233, 0.12);

  /* Markdown Preview Surfaces */
  --md-bg: #0E162A;
  --md-text: #E2E8F0;
  --md-headings: #FFFFFF;
  --md-code-bg: #090E1B;
  --md-code-border: #1E293B;
  --md-code-header-bg: #131D36;
  --md-inline-code-bg: rgba(192, 132, 252, 0.12);
  --md-inline-code-color: #D8B4FE;
  --md-table-border: rgba(255, 255, 255, 0.09);
  --md-table-stripe: rgba(255, 255, 255, 0.025);
  --md-table-hover: rgba(59, 130, 246, 0.06);
  --md-quote-border: #8B24A6;
  --md-quote-bg: rgba(139, 36, 166, 0.08);
  --md-hr-color: rgba(255, 255, 255, 0.1);
  --md-kbd-bg: #18233F;
  --md-kbd-border: rgba(255, 255, 255, 0.15);

  /* Syntax Highlighting Tokens (Dark Mode) */
  --hljs-text: #E6EDF3;
  --hljs-comment: #8B949E;
  --hljs-keyword: #FF7B72;
  --hljs-attr: #79C0FF;
  --hljs-string: #A5D6FF;
  --hljs-number: #79C0FF;
  --hljs-literal: #56D364;
  --hljs-title: #D2A8FF;
  --hljs-built-in: #FFA657;
  --hljs-tag: #7EE787;
}