@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Estedad";
  src: url("../assets/fonts/Estedad-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../assets/fonts/NotoSansArabic-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Typography */
  --font-fa: "Vazirmatn", "Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-latin: "Inter", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 520;
  --font-weight-semibold: 650;
  --font-weight-bold: 760;
  --font-size-00: 0.72rem;
  --font-size-0: 0.82rem;
  --font-size-1: 0.94rem;
  --font-size-2: 1.06rem;
  --font-size-3: 1.28rem;
  --font-size-4: 1.62rem;
  --font-size-5: clamp(2.2rem, 4.5vw, 4.9rem);
  --line-tight: 1.12;
  --line-heading: 1.35;
  --line-body: 1.9;
  --tracking-tight: -0.045em;
  --tracking-label: 0.12em;

  /* Brand color system */
  --canvas: #e3eae7;
  --canvas-deep: #ccd7d2;
  --ivory: #f7f4eb;
  --surface: rgba(241, 245, 242, 0.62);
  --surface-soft: rgba(255, 255, 255, 0.34);
  --surface-strong: rgba(255, 255, 255, 0.70);
  --surface-dark: rgba(8, 37, 33, 0.88);
  --ink: #0b3029;
  --ink-soft: #3e5b53;
  --ink-muted: #62766f;
  --ink-inverse: #f5f7f5;
  --brand: #075849;
  --brand-rich: #043f35;
  --brand-bright: #12806b;
  --brand-mist: rgba(7, 88, 73, 0.11);
  --brass: #b98535;
  --brass-bright: #e8ce8c;
  --brass-mist: rgba(199, 164, 93, 0.17);
  --line: rgba(255, 255, 255, 0.58);
  --line-dark: rgba(12, 57, 49, 0.16);
  --line-structural: rgba(42, 82, 71, 0.17);
  --line-structural-strong: rgba(7, 88, 73, 0.34);
  --focus: rgba(18, 128, 107, 0.42);
  --danger: #9b3f45;
  --success: #0a7059;

  /* Gradients */
  --gradient-canvas:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.86) 0 8%, transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(227, 211, 163, 0.42), transparent 31%),
    radial-gradient(circle at 68% 73%, rgba(7, 88, 73, 0.14), transparent 34%),
    linear-gradient(135deg, #e7ebe8 0%, #c7d1cd 45%, #edf0ed 100%);
  --gradient-brand: linear-gradient(135deg, #0a6958 0%, #043f35 100%);
  --gradient-brass: linear-gradient(135deg, #f0d895 0%, #b58b3f 100%);
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16));
  --gradient-glow: radial-gradient(circle, rgba(232, 206, 140, 0.50), rgba(18, 128, 107, 0.16) 42%, transparent 72%);

  /* Radii */
  --radius-xs: 0.55rem;
  --radius-sm: 0.85rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.65rem;
  --radius-xl: 2.2rem;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 0.35rem;
  --space-2: 0.55rem;
  --space-3: 0.8rem;
  --space-4: 1rem;
  --space-5: 1.35rem;
  --space-6: 1.75rem;
  --space-7: 2.25rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;

  /* Glass */
  --glass-blur: 28px;
  --glass-saturation: 1.2;
  --glass-border: 1px solid var(--line);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.82);

  /* Elevation */
  --shadow-1: 0 12px 34px rgba(35, 58, 52, 0.10);
  --shadow-2: 0 22px 58px rgba(28, 54, 47, 0.16);
  --shadow-3: 0 38px 96px rgba(20, 48, 41, 0.22);
  --shadow-brand: 0 18px 42px rgba(2, 73, 60, 0.28);
  --shadow-brass: 0 12px 35px rgba(173, 128, 48, 0.30);

  /* Motion */
  --motion-scale: 1;
  --duration-instant: calc(110ms * var(--motion-scale));
  --duration-fast: calc(220ms * var(--motion-scale));
  --duration-base: calc(420ms * var(--motion-scale));
  --duration-slow: calc(760ms * var(--motion-scale));
  --duration-drift: calc(7s * var(--motion-scale));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.35, 0.42, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --content-max: 88rem;
  --control-height-sm: 2.65rem;
  --control-height-md: 3.25rem;
  --control-height-lg: 3.8rem;

  /* Scrollbars */
  --scrollbar-track: rgba(149, 168, 160, 0.24);
  --scrollbar-thumb: rgba(7, 88, 73, 0.48);
  --scrollbar-thumb-hover: rgba(7, 88, 73, 0.68);
  --scrollbar-thumb-active: #075849;

  /* Pointer-driven values */
  --pointer-x: 50%;
  --pointer-y: 24%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

[data-font="estedad"] {
  --font-fa: "Estedad", "Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-font="noto"] {
  --font-fa: "Noto Sans Arabic", "Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="night"] {
  color-scheme: dark;
  --canvas: #061813;
  --canvas-deep: #020d0a;
  --ivory: #f6f1e7;
  --surface: rgba(9, 39, 33, 0.62);
  --surface-soft: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(19, 54, 47, 0.82);
  --surface-dark: rgba(2, 23, 19, 0.90);
  --ink: #f4f5f1;
  --ink-soft: #c8d3cf;
  --ink-muted: #91a29d;
  --ink-inverse: #06241e;
  --brand: #36b69d;
  --brand-rich: #0b6f5e;
  --brand-bright: #7ee0cc;
  --brand-mist: rgba(54, 182, 157, 0.14);
  --brass: #d0ad67;
  --brass-bright: #ffe1a0;
  --brass-mist: rgba(208, 173, 103, 0.13);
  --line: rgba(255, 255, 255, 0.14);
  --line-dark: rgba(255, 255, 255, 0.10);
  --focus: rgba(126, 224, 204, 0.50);
  --gradient-canvas:
    radial-gradient(circle at 10% 8%, rgba(60, 151, 132, 0.18), transparent 27%),
    radial-gradient(circle at 78% 20%, rgba(208, 173, 103, 0.12), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(54, 182, 157, 0.11), transparent 34%),
    linear-gradient(140deg, #081c17 0%, #03110e 55%, #0a201b 100%);
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025));
  --shadow-1: 0 12px 34px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.32);
  --shadow-3: 0 44px 110px rgba(0, 0, 0, 0.46);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0.001;
  }
}