/* ==========================================================================
   H7G.com Ver 2 — Design Tokens
   Single source of truth. Components never use raw hex or raw px.

   Colours, fonts, spacing, type scale and radii are all settled by section 01.
   ========================================================================== */

:root {
  /* --- Spacing: 4/8px rhythm ------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* The fixed header's band. Sections from 02 on clear it with their own top
     padding, so it is a shared constant rather than a header-only number.
     base.css steps it down with the brand mark at the same breakpoints
     section 01 uses, so the mark never appears to jump between the two. */
  --header-h: 160px;

  /* Section rhythm — fluid, so mobile isn't cramped and desktop isn't sparse */
  /* Tightened 2026-09-01 (user: sections sat too far apart — «خیلی کم باشد»);
     was clamp(3.5rem, 8vw, 7rem). */
  --section-block: clamp(2rem, 3vw, 3rem);
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --container: 1200px;

  /* --- Type scale ------------------------------------------------------- */
  --text-xs:  0.75rem;  /* 12px — labels only, never body */
  --text-sm:  0.875rem; /* 14px */
  --text-base: 1rem;    /* 16px — body floor on mobile */
  --text-lg:  1.125rem; /* 18px */
  --text-xl:  1.5rem;   /* 24px */
  --text-2xl: 2rem;     /* 32px */
  /* Section titles (every h2). 20% smaller 2026-09-01 at the user's request;
     was clamp(2.25rem, 5vw, 3.5rem). */
  --text-3xl: clamp(1.8rem, 4vw, 2.8rem);
  --text-4xl: clamp(2.75rem, 7vw, 5rem);

  --leading-tight: 1.15;  /* headings */
  --leading-body: 1.7;    /* body — Arabic marks need the extra room */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- Fonts -------------------------------------------------------------
     Pairing: "Classic Elegant" — high-contrast serif display + neutral sans
     body, mirrored across all three scripts. The Latin and Arabic faces are
     self-hosted in assets/fonts; Chinese uses the platform faces. */
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  /* Amiri is a Naskh face — the closest Arabic register to Playfair's
     high-contrast classicism, so the two languages carry the same voice. */
  --font-ar-display: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --font-en: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --font-en-display: "Playfair Display", Georgia, serif;

  /* Chinese rides on the platform faces rather than a webfont. The section uses
     ~34 characters, and Google's CJK families scatter them across a dozen
     unicode-range slices at 45–100 KB each — roughly a megabyte for a tagline.
     PingFang SC, Microsoft YaHei and Noto Sans CJK are all high quality and
     already installed. Songti/Source Han Serif carries the same classical
     serif register as Playfair and Amiri. */
  --font-zh: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-zh-display: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", SimSun, serif;

  /* One display token, not two. `base.css` re-points both of these per
     :lang(), so anything that needs the display face reads --font-display and
     follows the document's language automatically. */
  --font-body: var(--font-en);
  --font-display: var(--font-en-display);

  /* --- Color -------------------------------------------------------------
     Dark-native. Base = ui-ux-pro-max palette 33 (Luxury/Premium Brand,
     premium black + gold), shifted cool toward navy for the night/sea world. */
  --c-void: #04070b;          /* deepest black — the opening scene */
  --c-bg: #0a0e14;
  --c-surface: #121821;
  --c-border: #232b36;
  --c-text: #eceff3;          /* 16.8:1 on --c-bg */
  --c-text-muted: #96a0ad;    /*  7.1:1 on --c-bg */
  --c-gold: #c9a227;          /* accent — never used for body text */
  --c-gold-soft: #e3c77a;
  --c-brand: var(--c-gold);
  --c-on-brand: #0a0e14;
  --c-focus: #e3c77a;         /* gold focus ring reads better than blue here */

  /* --- Radius / elevation ------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Tuned for a dark surface: depth here comes from a lifted edge plus a
     deep spread, not from a faint grey drop that would be invisible. */
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05), 0 8px 24px rgb(0 0 0 / 0.55);
  --shadow-3: 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 60px rgb(0 0 0 / 0.65);

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* --- Z-index scale ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 40;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* Breakpoints (for reference — CSS custom props can't be used in media queries)
   sm 375px · md 768px · lg 1024px · xl 1440px */