/* ============ BASE RESET ============ */
  *,
  *::before,
  *::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }

  /* ============ FONT FACE (RTL optimized) ============ */
  @font-face {
      font-family: 'Vazir';
      src: url('/assets/fonts/vazir/Vazir-Thin.ttf') format('truetype');
      font-weight: 100;
      font-display: swap;
      unicode-range: U+0600-06FF; /* Arabic/Persian character range */
  }

  @font-face {
      font-family: 'Vazir';
      src: url('/assets/fonts/vazir/Vazir-Light.ttf') format('truetype');
      font-weight: 300;
      font-display: swap;
      unicode-range: U+0600-06FF;
  }

  @font-face {
      font-family: 'Vazir';
      src: url('/assets/fonts/vazir/Vazir-Medium.ttf') format('truetype');
      font-weight: 500;
      font-display: swap;
      unicode-range: U+0600-06FF;
  }

  @font-face {
      font-family: 'Vazir';
      src: url('/assets/fonts/vazir/Vazir-Bold.ttf') format('truetype');
      font-weight: 700;
      font-display: swap;
      unicode-range: U+0600-06FF;
  }

  /* ============ ROOT VARIABLES ============ */
  :root {
        /* === Breakpoints === */
        --mobile-breakpoint: 768px;
        --desktop-breakpoint: 769px;

        /* === Color System === */
        /* Primary Palette (based on #1e293b) */
        --color-primary-50: #f0f4f8;
        --color-primary-100: #d9e2ec;
        --color-primary-200: #bcccdc;
        --color-primary-300: #9fb3c8;
        --color-primary-400: #829ab1;
        --color-primary-500: #444444; /* Your base color */
        --color-primary-600: #1a2435;
        --color-primary-700: #161f2f;
        --color-primary-800: #121b29;
        --color-primary-900: #0e1623;
        
        /* Secondary Palette (complementary colors) */
        --color-secondary-50: #f8f0ff;
        --color-secondary-100: #e9d8ff;
        --color-secondary-200: #d8b4fe;
        --color-secondary-300: #c084fc;
        --color-secondary-400: #a855f7;
        --color-secondary-500: #8b5cf6;
        --color-secondary-600: #7c3aed;
        
        /* Accent/Tertiary Palette */
        --color-accent-500: #0ea5e9;
        --color-accent-400: #38bdf8;
        --color-accent-300: #7dd3fc;
        
        /* State Colors */
        --color-success: #10b981;
        --color-error: #ef4444;
        --color-warning: #f59e0b;
        --color-info: #3b82f6;
        
        /* Neutral Palette */
        --color-gray-50: #f8fafc;
        --color-gray-100: #f1f5f9;
        --color-gray-200: #e2e8f0;
        --color-gray-300: #cbd5e1;
        --color-gray-400: #94a3b8;
        --color-gray-500: #64748b;
        --color-gray-600: #475569;
        --color-gray-700: #334155;
        --color-gray-800: #1e293b;
        --color-gray-900: #0f172a;
        
        /* === Typography === */
        --font-base: 'Vazir', -apple-system, system-ui, sans-serif;
        --font-mono: 'Roboto Mono', monospace;
        --text-base-color: var(--color-gray-50);
        --text-muted: var(--color-gray-400);
        --text-inverted: white;
        
        /* === Spacing System === */
        --space-3xs: 0.25rem;  /* 4px */
        --space-2xs: 0.5rem;   /* 8px */
        --space-xs: 0.75rem;   /* 12px */
        --space-sm: 1rem;      /* 16px */
        --space-md: 1.5rem;    /* 24px */
        --space-lg: 2rem;      /* 32px */
        --space-xl: 3rem;      /* 48px */
        
        /* === Border System === */
        --border-radius-sm: 0.25rem;  /* 4px */
        --border-radius-md: 0.5rem;   /* 8px */
        --border-radius-lg: 0.75rem;  /* 12px */
        --border-radius-xl: 1rem;     /* 16px */
        --border-radius-full: 9999px;
        --border-width: 1px;
        --border-color: var(--color-gray-200);
        --border-identify: var(--color-error) 1px solid;
        
        /* === Shadow System === */
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        
        /* === Transition System === */
        --transition-duration-fast: 100ms;
        --transition-duration-normal: 200ms;
        --transition-duration-slow: 300ms;
        --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
        
        /* === Z-Index System === */
        --z-index-dropdown: 1000;
        --z-index-sticky: 1020;
        --z-index-fixed: 1030;
        --z-index-modal: 1050;
        --z-index-popover: 1070;
        --z-index-tooltip: 1080;
        
        /* === Component Tokens === */
        --navbar-height: 5rem;
        --sidebar-width: 16rem;
        --max-content-width: 1440px;

        /* Base font family */
        --font-family-base: "Vazir", Arial, sans-serif;

        /* Line Heights */
        --leading-tight: 1.2;
        --leading-medium: 1.46;
        --leading-normal: 1.5;
        --leading-relaxed: 1.75;

        --border-width-thin: 1px;
        --border-width-medium: 2px;
        --border-width-thick: 4px;

        --border-color-light: var(--color-gray-200);
        --border-color-dark: var(--color-gray-600);
        --border-color-primary: var(--color-primary);
        --border-color-danger: var(--color-danger);
        --border-color-success: var(--color-success);

        --navbar-height-desktop: 54px;
        --navbar-height-mobile: 66px;

        /* Button Heights (Desktop) */
        --btn-height-sm: 32px;   /* Small buttons */
        --btn-height-md: 40px;   /* Default buttons */
        --btn-height-lg: 48px;   /* Large buttons */
        --btn-height-xl: 56px;   /* Extra large buttons */

        /* Horizontal Padding (Desktop) */
        --btn-padding-sm: 0 0.75rem;  /* 12px sides */
        --btn-padding-md: 0 1rem;     /* 16px sides */
        --btn-padding-lg: 0 1.25rem;  /* 20px sides */
        --btn-padding-xl: 0 1.5rem;   /* 24px sides */

        /* Font Sizes */
        --btn-text-sm: var(--text-sm);
        --btn-text-md: var(--text-base);
        --btn-text-lg: var(--text-lg);
        --btn-text-xl: var(--text-xl);

        --color-main-background: #ECEFF1;   
        --color-card-background: #FAFAFA;

        /* These are used in comments */
        --primary-color: #4a6cf7;
        --text-color: #ffffff;
        --text-light: #b0b7c3;
        --border-color-comment: #4a5568;
        --bg-light: #2d3748;
        --success-color: #48bb78;
        --danger-color: #f56565;
        --card-bg: #1a202c;
        --container-bg: #2d3748;
        --hover-bg: #2a3446;
        --warning-color: #ecc94b;
    }

  /* ============ MOBILE TEXT SIZES ============ */
  @media (max-width: 768px) {
      :root {
          /* Mobile Font Sizes */
          --text-2xs: 0.05rem;   /* 11px */
          --text-xs: 0.7rem;   /* 11px */
          --text-sm: 0.8rem;   /* 13px */
          --text-base: 0.9rem; /* 14px */
          --text-lg: 1rem;     /* 16px */
          --text-xl: 1.125rem; /* 18px */
          --text-2xl: 1.25rem; /* 20px */
          --text-3xl: 1.5rem;  /* 24px */
          --text-4xl: 1.75rem; /* 28px */
          --text-5xl: 2.25rem; /* 36px */
          --text-6xl: 3rem;    /* 48px */

          /* Navbar on mobile */
          --navbar-height-desktop: var(--navbar-height-mobile);

          --btn-height-sm: 28px;
          --btn-height-md: 36px;
          --btn-height-lg: 44px;
          --btn-height-xl: 52px;

          --btn-padding-sm: 0 0.6rem;
          --btn-padding-md: 0 0.8rem;
          --btn-padding-lg: 0 1rem;
          --btn-padding-xl: 0 1.25rem;
      }
  }

  /* ============ DESKTOP TEXT SIZES ============ */
  @media (min-width: 769px) {
      :root {
          /* Desktop Font Sizes */
          --text-xs: 0.7rem;   /* 12px */
          --text-sm: 0.8rem;  /* 14px */
          --text-base: 0.9rem;  /* 14px */
          --text-lg: 1rem;  /* 18px */
          --text-xl: 1.25rem;   /* 20px */
          --text-2xl: 1.5rem;   /* 24px */
          --text-3xl: 1.875rem; /* 30px */
          --text-4xl: 2.25rem;  /* 36px */
          --text-5xl: 3rem;     /* 48px */
          --text-6xl: 3.75rem;  /* 60px */
      }
  }

  /* ============ DARK MODE ============ */
  @media (prefers-color-scheme: dark) {
      :root {
          --text-base-color: var(--color-gray-100);
          --text-muted: var(--color-gray-400);
          --text-inverted: var(--color-gray-900);
          --border-color: var(--color-gray-700);
          
          /* Dark mode color adjustments */
          --color-primary-500: #829ab1;
          --color-secondary-500: #a855f7;
      }
  }

  /* ============ BASE STYLES ============ */
  html {
      scroll-behavior: smooth;
      -webkit-tap-highlight-color: transparent;
  }

  body {
      font-family: var(--font-base);
      color: var(--text-base-color);
      background-color: var(--color-main-background);
      font-size: var(--text-base);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      direction: rtl; /* RTL support for Vazir */
      display: grid;
      grid-template-rows: auto minmax(0, auto) auto; /* auto size for content */
      min-height: 100vh; /* ensures footer at bottom when content is short */
  }

  /* ============ TYPOGRAPHY ============ */
  h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: var(--space-sm);
  }

  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
  h4 { font-size: var(--text-2xl); }
  h5 { font-size: var(--text-xl); }
  h6 { font-size: var(--text-lg); }

  p {
      margin-bottom: var(--space-sm);
      max-width: 65ch;
      font-size: var(--text-base);
  }