/* ==========================================================
   Moeen-e design tokens
   Palette derived from the service profile: brand teal #1E6B67,
   navy #172144, mint #E3F0EE. Dark is the primary experience.
   ========================================================== */

:root {
  /* Brand constants (theme independent) */
  --brand-teal: #1E6B67;
  --brand-navy: #172144;
  --brand-mint: #E3F0EE;
  --brand-sand: #D9B877;

  /* Dark theme (default) */
  --bg-primary: #0E2328;
  --bg-secondary: #112B31;
  --bg-deep: #0A1B1F;
  --surface: rgba(214, 238, 234, 0.045);
  --surface-strong: rgba(214, 238, 234, 0.08);
  --surface-glass: rgba(14, 35, 40, 0.72);
  --text-primary: #EAF4F2;
  --text-secondary: #A9C4C0;
  --text-muted: #7E9C98;
  --accent: #5BBFB4;
  --accent-strong: #8AD8CE;
  --accent-ink: #062A27;
  --accent-soft: rgba(91, 191, 180, 0.14);
  --border: rgba(214, 238, 234, 0.12);
  --border-strong: rgba(214, 238, 234, 0.24);
  --plan-line: rgba(214, 238, 234, 0.07);
  --seg-gap: var(--bg-primary);
  --glow: rgba(46, 140, 131, 0.35);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, 0.55);
  --media-light: #E3F0EE;

  /* Typography */
  --font-sans: "Readex Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.5rem + 2.9vw, 4rem);
  --fs-3xl: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --lh-tight: 1.2;
  --lh-snug: 1.45;
  --lh-body: 1.85;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 9rem;
  --section-y: clamp(5rem, 3rem + 7vw, 10rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* Radii — scaled by hierarchy, not one value everywhere */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --octagon: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;

  --header-h: 76px;
  color-scheme: dark;
}

/* Light theme */
:root[data-theme="light"] {
  --bg-primary: #F5F9F8;
  --bg-secondary: #E3F0EE;
  --bg-deep: #EAF3F1;
  --surface: rgba(23, 33, 68, 0.035);
  --surface-strong: rgba(23, 33, 68, 0.06);
  --surface-glass: rgba(245, 249, 248, 0.78);
  --text-primary: #172144;
  --text-secondary: #3D5260;
  --text-muted: #5D7280;
  --accent: #1E6B67;
  --accent-strong: #16524F;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(30, 107, 103, 0.1);
  --border: rgba(23, 33, 68, 0.12);
  --border-strong: rgba(23, 33, 68, 0.22);
  --plan-line: rgba(23, 33, 68, 0.07);
  --glow: rgba(30, 107, 103, 0.16);
  --shadow-lg: 0 30px 70px -34px rgba(23, 33, 68, 0.35);
  --shadow-md: 0 14px 34px -20px rgba(23, 33, 68, 0.3);
  color-scheme: light;
}