/* ===============================
1. CSS RESET & BASE STYLES
=============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family, sans-serif);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Remove default button styling */
button {
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background-color: var(--color-accent);
  color: #fff;
}

/* ===============================
2. FONT-FACE DEFINITIONS
=============================== */
@font-face {
  font-family: 'iransans';
  src: url('../assets/fonts/IRANSansWeb_FN_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iransans';
  src: url('../assets/fonts/IRANSansWeb_FN_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
3. GLOBAL CSS VARIABLES
=============================== */
:root {
  /* Font Family */
  --font-family: 'iransans', sans-serif;

  /* Headings and Emphasis */
  --font-heading-size: 24px;
  --font-heading-line: 1.5em;
  --font-heading-weight: 700;

  --font-label-size: 18px;
  --font-label-line: 1.7em;
  --font-label-weight: 700;

  --font-widget-size: 16px;
  --font-widget-line: 1.8em;
  --font-widget-weight: 700;

  --font-btn-size: 14px;
  --font-btn-line: 1.5em;
  --font-btn-weight: 700;

  /* Body and Utility Text */
  --font-lg-size: 16px;
  --font-lg-line: 1.8em;
  --font-lg-weight: 400;

  --font-nav-size: 14px;
  --font-nav-line: 2.0em;
  --font-nav-weight: 400;

  --font-text-size: 14px;
  --font-text-line: 2.0em;
  --font-text-weight: 400;

  --font-desc-size: 12px;
  --font-desc-line: 2.0em;
  --font-desc-weight: 400;

  /* Colors - Accent */
  --color-accent: #04A9F5;
  --color-accent-hover: #0390D0;
  --color-yellow: #F59E0B;
  --color-red: #EF4444;
  --color-orange: #FF5700;
  --color-green: #22C55E;

  /* Light Theme Colors (Default) */
  --color-heading: #1D2630;
  --color-text: #39465F;
  --color-placeholder: #868686;
  --color-background: #F3F5F7;
  --color-card: #ffffff;
  --color-border: #cecece;

  --card-radius: 12px;
  --card-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12);

  --input-radius: 6px;
  --input-bg: var(--color-background);
}

/* ===============================
4. DARK MODE DETECTION (Auto)
=============================== */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-heading: #FFFFFF;
    --color-text: #BFBFBF;
    --color-background: #131920;
    --color-card: #1D2630;
    --color-border: #303F50;
  }
} */

/* ===============================
5. FORCED DARK THEME (Override)
=============================== */
[data-theme='dark'] {
  --color-heading: #FFFFFF;
  --color-text: #BFBFBF;
  --color-background: #131920;
  --color-card: #1D2630;
  --color-border: #303F50;
}

/* ===============================
6. UTILITY CLASSES (Optional)
=============================== */
.rtl {
  direction: rtl;
  text-align: right;
}

.ltr {
  direction: ltr;
  text-align: left;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===============================
7. TYPOGRAPHY UTILITIES
=============================== */
h1, h2, h3, h4, h5, h6,
.ea_h1, .ea_h2, .ea_h3, .ea_h4, .ea_h5, .ea_h6 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  color: var(--color-heading);
}

p {
  margin: 0 0 1rem;
}

.ea_heading {
  color: var(--color-heading);
  font-size: var(--font-heading-size);
  line-height: var(--font-heading-line);
  font-weight: var(--font-heading-weight);
}

.ea_label {
  color: var(--color-heading);
  font-size: var(--font-label-size);
  line-height: var(--font-label-line);
  font-weight: var(--font-label-weight);
}

.ea_widget {
  color: var(--color-heading);
  font-size: var(--font-widget-size);
  line-height: var(--font-widget-line);
  font-weight: var(--font-widget-weight);
}

.ea_btn {
  font-size: var(--font-btn-size);
  line-height: var(--font-btn-line);
  font-weight: var(--font-btn-weight);
}

.ea_lg_text {
  color: var(--color-text);
  font-size: var(--font-lg-size);
  line-height: var(--font-lg-line);
  font-weight: var(--font-lg-weight);
}

.ea_nav {
  color: var(--color-text);
  font-size: var(--font-nav-size);
  line-height: var(--font-nav-line);
  font-weight: var(--font-nav-weight);
}

.ea_text {
  color: var(--color-text);
  font-size: var(--font-text-size);
  line-height: var(--font-text-line);
  font-weight: var(--font-text-weight);
}

.ea_desc {
  color: var(--color-text);
  font-size: var(--font-desc-size);
  line-height: var(--font-desc-line);
  font-weight: var(--font-desc-weight);
}

h1,
.ea_h1 {
  font-size: var(--font-heading-size); /* 24px */
  line-height: var(--font-heading-line); /* 1.5em */
  font-weight: var(--font-heading-weight); /* 700 */
}

h2,
.ea_h2 {
  font-size: 22px;
  line-height: 1.5em;
  font-weight: 700;
}

h3,
.ea_h3 {
  font-size: 20px;
  line-height: 1.5em;
  font-weight: 700;
}

h4,
.ea_h4 {
  font-size: 18px;
  line-height: 1.6em;
  font-weight: 700;
}

h5,
.ea_h5 {
  font-size: 16px;
  line-height: 1.6em;
  font-weight: 700;
}

h6,
.ea_h6 {
  font-size: 14px;
  line-height: 1.6em;
  font-weight: 700;
}

/* In global.css */
.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}