/* ==========================================================================
   حيازة / Heyazah — design system
   Sources: 04_Docs/ملف هـوية حـيـازة.pdf (print authority, 78pp, Apr 2026)
            04_Docs/heyazah-site-index.css (digital authority, heyazah.com)
   Conflicts and the decisions taken are documented in 06_System/README.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

/* Arabic display — the live brand face. Not in the printed manual; see README. */
@font-face {
  font-family: "Manchette Fine";
  src: url("fonts/ManchetteFineVF.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

/* Arabic + Latin text, and ALL numerals. The manual's only specified face. */
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-Light.ttf")      format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-Regular.ttf")    format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-Medium.ttf")     format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-SemiBold.ttf")   format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/ReadexPro-Bold.ttf")       format("truetype"); font-weight: 700; font-display: swap; }

/* Latin display. Live site only; commercial licence (fontiran). */
@font-face {
  font-family: "Abar";
  src: url("fonts/Abar-VF.ttf") format("truetype-variations");
  font-weight: 400 1000;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Brand palette — raw values, never used directly in components
   -------------------------------------------------------------------------- */

:root {
  /* Print authority — hex printed on p.16 of the manual */
  --hz-teal:        #025157;
  --hz-dark:        #082b2a;
  --hz-sand:        #d1ccbd;
  --hz-taupe:       #99856a;
  --hz-sage:        #b0b5aa;
  --hz-sage-pale:   #cad1c7;
  --hz-neutral-100: #e5e9e9;
  --hz-white:       #ffffff;
  --hz-black:       #000000;

  /* Digital authority — what heyazah.com ships today */
  --hz-teal-web:    #03211f;
  /* Taupe is a print colour. As body text it lands at 2.21:1 on sand, 2.27:1 on
     pale sage and 2.90:1 on neutral — every eyebrow, caption, table header and
     figure label on this page was under AA. The palette already carries the
     convention (gold-web sits beside gold for exactly this reason), so taupe
     gets the same treatment: the same hue at 60% value, clearing 4.89:1 on
     sand, 5.03:1 on sage and 6.41:1 on neutral. --hz-taupe itself is untouched
     and stays correct wherever the brand calls for the printed tone. */
  --hz-taupe-web:   #5c5040;
  --hz-bone-web:    #eeede7;
  --hz-gold-web:    #8f7756;
  --hz-gold-web-on-dark: #c1ad8b;

  /* Metallics. The manual shows gradients only — no flat value is specified. */
  --hz-gold:   linear-gradient(90deg, #683701, #95622c, #bc8953, #d5a26c);
  --hz-silver: linear-gradient(90deg, #454443, #767574, #a9a8a7, #cdcccb);
  --hz-gold-flat:   #bc8953;  /* inferred midpoint, for flat fills only */
  --hz-silver-flat: #a9a8a7;  /* inferred midpoint */
}

/* --------------------------------------------------------------------------
   3. Semantic tokens — light theme (default)
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --color-bg:            var(--hz-sand);
  --color-surface:       var(--hz-neutral-100);
  --color-surface-muted: var(--hz-sage-pale);
  --color-border:        var(--hz-sage);

  --color-ink:           var(--hz-teal);
  --color-ink-muted:     var(--hz-taupe-web);
  --color-ink-inverse:   var(--hz-sand);

  --color-brand:         var(--hz-teal);
  --color-brand-hover:   var(--hz-dark);
  --color-accent:        var(--hz-taupe);
  --color-on-brand:      var(--hz-sand);

  --logo-ink:            var(--hz-teal);
}

/* --------------------------------------------------------------------------
   4. Semantic tokens — dark theme
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --color-bg:            var(--hz-dark);
  --color-surface:       #0d3634;
  --color-surface-muted: #123f3c;
  --color-border:        #1c514d;

  --color-ink:           var(--hz-sand);
  --color-ink-muted:     var(--hz-sage);
  --color-ink-inverse:   var(--hz-dark);

  --color-brand:         var(--hz-sand);
  --color-brand-hover:   var(--hz-white);
  --color-accent:        var(--hz-gold-web-on-dark);
  --color-on-brand:      var(--hz-dark);

  --logo-ink:            var(--hz-sand);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--hz-dark);
    --color-surface:       #0d3634;
    --color-surface-muted: #123f3c;
    --color-border:        #1c514d;
    --color-ink:           var(--hz-sand);
    --color-ink-muted:     var(--hz-sage);
    --color-ink-inverse:   var(--hz-dark);
    --color-brand:         var(--hz-sand);
    --color-brand-hover:   var(--hz-white);
    --color-accent:        var(--hz-gold-web-on-dark);
    --color-on-brand:      var(--hz-dark);
    --logo-ink:            var(--hz-sand);
  }
}

/* --------------------------------------------------------------------------
   5. Typography
   The manual specifies faces and weights but NO type scale — the ramp below is
   authored, not extracted. Ratio 1.25, 16px base.
   -------------------------------------------------------------------------- */

:root {
  --font-display-ar: "Manchette Fine", "Readex Pro", system-ui, sans-serif;
  --font-display-en: "Abar", "Readex Pro", system-ui, sans-serif;
  --font-text:       "Readex Pro", system-ui, sans-serif;

  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5625rem; /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 */
  --text-5xl:  3.815rem;  /* 61 */

  --leading-tight:  1.2;
  --leading-normal: 1.6;   /* Arabic needs the extra room; do not go below 1.5 */
  --leading-loose:  1.8;

  /* Tracking is LATIN-ONLY. Arabic is cursive — any letter-spacing, positive or
     negative, is inserted at every glyph boundary and breaks the joins. Never
     apply these to an Arabic run; use --tracking-none there. */
  --tracking-display: -0.01em;
  --tracking-normal:  0;
  --tracking-caps:    0.08em;
  --tracking-none:    normal;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);

  /* Numerals: Western digits, lining + tabular. This is the live-site rule and
     the one the client pointed at ("خط الأرقام الي هنا"). */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern", "liga", "calt", "lnum", "tnum";
}

h1, h2, h3 { font-family: var(--font-display-ar); font-weight: var(--weight-light);
             line-height: var(--leading-tight); letter-spacing: var(--tracking-none); }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { letter-spacing: var(--tracking-display); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

:lang(en) h1, :lang(en) h2, :lang(en) h3 { font-family: var(--font-display-en); }

/* Opt-in tracking for a Latin run inside an Arabic page. */
.lat { letter-spacing: var(--tracking-caps); }

/* Statistics / KPI figures — always Readex, never the display face. */
.hz-figure {
  font-family: var(--font-text);
  font-weight: var(--weight-extralight);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--text-5xl);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   6. Space, radius, elevation
   None of this is in the manual — authored on an 8px base.
   -------------------------------------------------------------------------- */

:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;

  /* The arch is the brand's only geometric motif: a half-round top on straight
     sides. Radii echo it — generous on top-heavy surfaces. */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-arch: 999px 999px 0 0;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(8 43 42 / 0.08);
  --shadow-md: 0 4px 16px rgb(8 43 42 / 0.10);
  --shadow-lg: 0 12px 40px rgb(8 43 42 / 0.14);

  /* Logo clear space. NOT in the manual — authored rule: one arch-stem width,
     which is 1/8 of the icon's height. */
  --logo-clear-space: 0.125;
  --logo-min-width-lockup: 96px;
  --logo-min-width-icon:   24px;
}

/* --------------------------------------------------------------------------
   7. Patterns — the three arch-derived devices, pp.18–20
   Artwork lives in 05_Media. These are hooks, not reproductions.
   -------------------------------------------------------------------------- */

.hz-pattern-rays,
.hz-pattern-pinstripe,
.hz-pattern-arch {
  background-repeat: repeat;
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   8. Logo
   -------------------------------------------------------------------------- */

.hz-logo { display: inline-block; color: var(--logo-ink); }
.hz-logo svg { height: 100%; width: auto; fill: currentColor; display: block; }
.hz-logo--lockup { min-width: var(--logo-min-width-lockup); }
.hz-logo--icon   { min-width: var(--logo-min-width-icon); }