/* App brand tokens & typography */
@import url('fonts.css?v=5');
@import url('icons.css?v=8');
@import url('edp-background.css?v=39');

:root {
  /* Typography — visual identity */
  --edp-font-stack: Poppins, YekanBakh, IRANSans, IRANSans2, IRMitra, Georgia, Tahoma;
  --edp-title-size: 38px;
  --edp-title-weight: 700;
  --edp-title-line: 45px;
  --edp-desc-size: 18px;
  --edp-desc-weight: 400;
  --edp-desc-line: 34px;

  /* Core palette — darker flat greens */
  --edp-green: #006947;
  --edp-green-dark: #004630;
  --edp-green-soft: #4a7a65;
  --edp-green-muted-bg: #e8efeb;
  --edp-green-border: #5a9f87;
  --edp-link: #006947;
  --edp-text: #37474f;
  --edp-text-muted: #555555;
  --edp-text-light: #e2e5e7;
  --edp-black: #000000;

  /* Surfaces */
  --edp-bg: #fdfbf5;
  --edp-bg-section: #f5f2ea;
  --edp-surface: #ffffff;

  /* Shape */
  --edp-radius-card: 16px;
  --edp-radius-pill: 100px;

  /* Shadows — flat neutral, no color glow */
  --edp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --edp-shadow-neutral: 0 1px 2px rgba(0, 0, 0, 0.06);

  /* RGB helpers */
  --edp-green-rgb: 0, 105, 71;
  --edp-link-rgb: 0, 105, 71;
  --edp-text-rgb: 55, 71, 79;

  /* Extended chart palette (21 colors) */
  --brand-green-100: #003322;
  --brand-green-200: #004630;
  --brand-green-300: #005a3c;
  --brand-green-400: #006947;
  --brand-green-500: #2d8568;
  --brand-green-600: #5a9f87;
  --brand-green-700: #8fb9aa;
  --brand-gold-100: #604B01;
  --brand-gold-200: #8F7102;
  --brand-gold-300: #BF9602;
  --brand-gold-400: #EFBC03;
  --brand-gold-500: #F2C935;
  --brand-gold-600: #F5D768;
  --brand-gold-700: #F9E49A;
  --brand-slate-100: #263238;
  --brand-slate-200: #3A4B53;
  --brand-slate-300: #4D646F;
  --brand-slate-400: #607D8B;
  --brand-slate-500: #8097A2;
  --brand-slate-600: #A0B1B9;
  --brand-slate-700: #BFCBD1;

  /* Semantic aliases */
  --brand-primary: var(--edp-green);
  --brand-primary-dark: var(--edp-green-dark);
  --brand-secondary: var(--edp-link);
  --brand-neutral: var(--edp-text);
  --brand-bg: var(--edp-bg);
  --brand-bg-alt: var(--edp-bg-section);
  --brand-surface: var(--edp-surface);
  --brand-surface-muted: #f7f8f9;
  --brand-text: var(--edp-text);
  --brand-text-soft: var(--edp-text-muted);
  --brand-text-dim: #8097a2;

  --brand-solid-primary: var(--edp-green);
  --brand-solid-secondary: var(--edp-link);
  --brand-solid-neutral: var(--edp-text);
  --brand-solid-user: var(--edp-green);
  --brand-solid-ai: var(--edp-surface);
  --brand-solid-btn: var(--edp-green);

  --brand-green-rgb: var(--edp-green-rgb);
  --brand-gold-rgb: 239, 188, 3;
  --brand-slate-rgb: 96, 125, 139;
  --brand-glow-green: transparent;
  --brand-glow-gold: transparent;
  --brand-glow-slate: transparent;

  --chart-c-01: #003322;
  --chart-c-02: #004630;
  --chart-c-03: #005a3c;
  --chart-c-04: #006947;
  --chart-c-05: #2d8568;
  --chart-c-06: #5a9f87;
  --chart-c-07: #8fb9aa;
  --chart-c-08: #604B01;
  --chart-c-09: #8F7102;
  --chart-c-10: #BF9602;
  --chart-c-11: #EFBC03;
  --chart-c-12: #F2C935;
  --chart-c-13: #F5D768;
  --chart-c-14: #F9E49A;
  --chart-c-15: #263238;
  --chart-c-16: #3A4B53;
  --chart-c-17: #4D646F;
  --chart-c-18: #607D8B;
  --chart-c-19: #8097A2;
  --chart-c-20: #A0B1B9;
  --chart-c-21: #BFCBD1;
}

@media (max-width: 768px) {
  :root {
    --edp-title-size: 22px;
    --edp-title-line: 28px;
    --edp-desc-size: 15px;
    --edp-desc-line: 24px;
  }
}

.edp-title {
  font-family: var(--edp-font-stack);
  font-size: var(--edp-title-size);
  font-style: normal;
  font-weight: var(--edp-title-weight);
  line-height: var(--edp-title-line);
  margin: 0;
}

.edp-title > span:not([class]) {
  color: #006947;
}

.edp-description {
  font-family: var(--edp-font-stack);
  font-size: var(--edp-desc-size);
  font-style: normal;
  font-weight: var(--edp-desc-weight);
  line-height: var(--edp-desc-line);
  margin: 0;
}

.edp-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.edp-text-block--center {
  align-items: center;
  text-align: center;
}

.edp-text-block .edp-title + .edp-description {
  margin-top: 6px;
}

.edp-section-head .edp-description {
  margin-top: 8px;
  color: var(--edp-text-muted);
}