/**
 * Theme Variables
 * 
 * Complete theming system for the Industrie template.
 * Based on the design system and PRD requirements.
 */

:root {
  /* ========================================
     FONT FAMILIES
     ======================================== */
  --font-family-base: "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-body: "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-icon-fa: "Font Awesome 6 Pro";
  --font-family-icon-remix: "remixicon";

  /* Persian Font Support for RTL content */
  --font-family-persian: "Vazirmatn","IRANSans", sans-serif;

  /* ========================================
     FONT SIZES
     ======================================== */
  --font-size-base: 18px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 22px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 38px;
  --font-size-4xl: 52px;
  --font-size-5xl: 68px;

  --font-size-h1: var(--font-size-5xl);
  --font-size-h2: var(--font-size-4xl);
  --font-size-h3: var(--font-size-3xl);
  --font-size-h4: var(--font-size-2xl);
  --font-size-h5: var(--font-size-xl);
  --font-size-h6: var(--font-size-base);

  /* ========================================
     FONT WEIGHTS
     ======================================== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ========================================
     LINE HEIGHTS
     ======================================== */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     SPACING SYSTEM
     ======================================== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  --spacing-4xl: 6rem; /* 96px */
  --spacing-5xl: 8rem; /* 128px */

  /* ========================================
     COLOR SYSTEM - PRIMARY (Ceiling Blue)
     ======================================== */
  --color-primary: #005578;
  --color-primary-hover: #004560;
  --color-primary-light: #006a8f;
  --color-primary-dark: #003d54;
  --color-primary-rgb: 0, 85, 120;

  /* ========================================
     COLOR SYSTEM - SECONDARY (Mind Green)
     ======================================== */
  --color-secondary: #00aea5;
  --color-secondary-hover: #008b84;
  --color-secondary-light: #00c4ba;
  --color-secondary-dark: #007a73;
  --color-secondary-rgb: 0, 174, 165;

  /* ========================================
     COLOR SYSTEM - ACCENT (Mind Green)
     ======================================== */
  --color-accent: #00aea5;
  --color-accent-hover: #008b84;
  --color-accent-light: #00c4ba;
  --color-accent-dark: #007a73;
  --color-accent-rgb: 0, 174, 165;

  /* ========================================
     COLOR SYSTEM - SEMANTIC
     ======================================== */
  --color-success: #00caa4;
  --color-warning: #f7c600;
  --color-error: #e30613;
  --color-info: #0d80ce;

  /* ========================================
     COLOR SYSTEM - NEUTRAL (Light Theme)
     ======================================== */
  --color-white: #ffffff;
  --color-black: #1b1b1b;
  --color-gray-50: #f7f7f7;
  --color-gray-100: #eeeeee;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #cbcccd;
  --color-gray-400: #9e9e9e;
  --color-gray-500: #616161;
  --color-gray-600: #424242;
  --color-gray-700: #2f2f2f;
  --color-gray-800: #1f1f1f;
  --color-gray-900: #0a0a0a;

  /* ========================================
     COLOR SYSTEM - BACKGROUND
     ======================================== */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-overlay-light: rgba(0, 0, 0, 0.05);
  --bg-overlay-white: rgba(255, 255, 255, 0.07);

  /* ========================================
     COLOR SYSTEM - TEXT
     ======================================== */
  --text-primary: #1b1b1b;
  --text-secondary: var(--color-gray-500);
  --text-tertiary: #142340;
  --text-heading: #1b1b1b;
  --text-heading-secondary: #152a40;
  --text-muted: var(--color-gray-400);
  --text-inverse: var(--color-white);
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-hover);

  /* ========================================
     COLOR SYSTEM - BORDERS
     ======================================== */
  --border-color-primary: rgba(0, 0, 0, 0.05);
  --border-color-secondary: rgba(102, 102, 102, 0.2);
  --border-color-tertiary: #152a40;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-full: 9999px;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-none: none;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  --transition-all: all var(--transition-base);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-index-base: 1;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-overlay: 9999;

  /* ========================================
     BREAKPOINTS (for reference)
     ======================================== */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ========================================
     CONTAINER
     ======================================== */
  --container-max-width: 1320px;
  --container-padding: var(--spacing-lg);

  /* ========================================
     SECTION SPACING
     ======================================== */
  --section-padding-y: var(--spacing-5xl);
  --section-padding-y-sm: var(--spacing-3xl);
  --section-padding-y-xs: var(--spacing-2xl);

  /* ========================================
     PLACEHOLDER
     ======================================== */
  --placeholder-color: rgba(30, 30, 30, 0.4);
  --placeholder-opacity: 0.4;

  /* ========================================
     RATING
     ======================================== */
  --rating-color: #ffc62d;
}

/* ========================================
   THEME CLASSES
   ======================================== */
.theme-light {
  --theme-mode: light;
}

.theme-dark {
  --theme-mode: dark;
}

/* ========================================
   PERSIAN FONT SUPPORT FOR RTL CONTENT
   ======================================== */

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[lang="fa"] h1,
[lang="fa"] h2,
[lang="fa"] h3,
[lang="fa"] h4,
[lang="fa"] h5,
[lang="fa"] h6 {
  font-family: var(--font-family-persian) !important;
}