:root {
  /* Latin */
  --font-display:    'Cinzel', serif;
  --font-body:       'Cormorant Garamond', serif;

  /* Arabic — TYPOGRAPHY v1.0.2 canonical names */
  --font-ar-disp:    'Amiri', serif;         /* display: h1–h3, ≥24px only */
  --font-ar:         'Noto Naskh Arabic', serif; /* body + UI text */

  /* Backward-compat aliases (used by main.css) */
  --font-display-ar: var(--font-ar-disp);
  --font-body-ar:    var(--font-ar);

  /* Cuneiform (logo mark only — never in running text) */
  --font-cuneiform:  'Noto Sans Cuneiform', serif;

  /* System (UI chrome: buttons, inputs, nav per D-TYPO-01 Option B) */
  --font-system:     system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Code (help.html only — Fira Code self-hosted) */
  --font-code:       'Fira Code', 'Courier New', monospace;

  /* Backward-compat alias */
  --font-mono:       var(--font-code);
}


/* ============================================================
   3. TYPE SCALE — Major Third (1.250), base 1rem = 16px
   ============================================================

   Step  Ratio   px     rem      Role
   ─────────────────────────────────────
   h1    ×2.441  39px   2.441    Hero / page title
   h2    ×1.953  31px   1.953    Section heading
   h3    ×1.563  25px   1.563    Subsection
   h4    ×1.25   20px   1.25     Card title
   h5    ×1      16px   1        Subheading
   h6    ×0.813  13px   0.813    Label / overline
   body  ×1      16px   1        Running text
   sm    ×0.875  14px   0.875    Secondary text
   cap   ×0.75   12px   0.75     Caption
   over  ×0.688  11px   0.688    Overline (smallest allowed)
   ============================================================ */

:root {
  /* Font sizes */
  --fs-h1:      2.441rem;
  --fs-h2:      1.953rem;
  --fs-h3:      1.563rem;
  --fs-h4:      1.25rem;
  --fs-h5:      1rem;
  --fs-h6:      0.813rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-caption: 0.75rem;
  --fs-over:    0.688rem;

  /* Fluid font sizes — clamp(min, preferred, max) */
  --fs-h1-fluid:   clamp(1.953rem, 1.6rem + 1.5vw, 2.441rem);
  --fs-h2-fluid:   clamp(1.563rem, 1.3rem + 1.1vw, 1.953rem);
  --fs-h3-fluid:   clamp(1.25rem,  1.1rem + 0.8vw, 1.563rem);
  --fs-body-fluid: clamp(0.938rem, 0.9rem + 0.2vw, 1rem);

  /* Line heights — Latin */
  --lh-h1:      1.2;
  --lh-h2:      1.25;
  --lh-h3:      1.3;
  --lh-h4:      1.4;
  --lh-h5:      1.4;
  --lh-h6:      1.4;
  --lh-body:    1.65;
  --lh-sm:      1.5;
  --lh-caption: 1.4;

  /* Line heights — Arabic (taller for diacritical marks) */
  --lh-h1-ar:   1.4;
  --lh-h2-ar:   1.45;
  --lh-h3-ar:   1.5;
  --lh-h4-ar:   1.5;
  --lh-body-ar: 1.8;
  --lh-sm-ar:   1.7;
  --lh-cap-ar:  1.6;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Letter spacing — Latin display only (Arabic NEVER gets letter-spacing) */
  --ls-display:  0.15em;
  --ls-heading:  0.06em;
  --ls-overline: 0.1em;
  --ls-body:     normal;
}


/* ============================================================
   4. COLORS — Mesopotamian Material Palette
   ============================================================
   Every color maps to a real archaeological material.
   Akkadian/Sumerian terms in comments for reference.
   ============================================================ */

:root {
  /* ── Primary: Lapis Lazuli (uqnû) ── */
  --color-night-lapis:   #0B1A2E;  /* Deep lapis — dark bg                    */
  --color-deep-lapis:    #0F2035;  /* Raw lapis vein — dark elevated surfaces  */
  --color-lapis-mid:     #162A45;  /* Lapis mid-vein — dark hover states       */

  /* ── Primary: Gold (ḫurāṣu) ── */
  --color-brand-gold:    #C69C3E;  /* Patina'd gold — brand identity           */
  --color-bright-gold:   #D4A843;  /* Freshly hammered — CTAs, buttons         */
  --color-light-gold:    #DBBE72;  /* Gold leaf — links, tags (dark mode)       */
  --color-deep-gold:     #8A6520;  /* Aged gold — CTA / link on light mode     */
  --color-antique-gold:  #7A5A1E;  /* Antiqued patina — links on light mode    */

  /* ── Earth: Clay spectrum ── */
  --color-fired-clay:    #BF9360;  /* Kiln-fired tablet clay                   */
  --color-clay-border:   #8A6B42;  /* Sun-dried clay edge — borders            */
  --color-deep-clay:     #5C4A30;  /* Wet river clay — text on light bg        */

  /* ── Sand & Shell ── */
  --color-river-sand:    #E6D2AE;  /* Alluvial silt — body text (dark mode)    */
  --color-faded-sand:    #BFA87C;  /* Dry sand — secondary text (dark mode)    */
  --color-dry-clay:      #8A7A62;  /* Parched clay — tertiary/hint text        */

  /* ── Neutrals: Stone & Mineral ── */
  --color-gypsum:        #F5F0E6;  /* Gypsum plaster — light bg (secondary)    */
  --color-aged-gypsum:   #EDE7D9;  /* Aged gypsum — light hover                */
  --color-shell-white:   #FFFFFF;
  --color-limestone:     #D9D0C1;  /* Cut limestone — secondary surface        */
  --color-weathered:     #A89B88;  /* Diorite/sandstone — placeholder text     */
  --color-bitumen:       #1A1A18;  /* Bitumen tar (kupru) — deepest dark       */

  /* ── Footer deep bg (darker than night-lapis) ── */
  --color-abyss:         #091728;  /* Footer / page-level deep dark            */

  /* ── Semantic: Archaeological Minerals ── */

  /* Success — Malachite (copper patina) */
  --color-malachite:     #3D7A4A;
  --color-malachite-deep:#2C6038;
  --color-malachite-bg:  #E8F2EA;
  --color-malachite-mid: #A8CEAF;
  --color-malachite-dark:#1E3D25;

  /* Warning — Yellow Ochre */
  --color-ochre:         #B8862B;
  --color-ochre-burnt:   #8A6520;
  --color-ochre-bg:      #FBF3E0;
  --color-ochre-mid:     #DCBC6E;
  --color-ochre-dark:    #5C4316;

  /* Danger — Carnelian */
  --color-carnelian:     #A63A2A;
  --color-carnelian-deep:#8B2E1E;
  --color-carnelian-bg:  #FAEDEA;
  --color-carnelian-mid: #D9887A;
  --color-carnelian-dark:#532015;

  /* Info — Egyptian Blue */
  --color-egypt-blue:    #1D4E7E;
  --color-egypt-deep:    #1A4268;
  --color-egypt-bg:      #E6EEF6;
  --color-egypt-mid:     #7FACC9;
  --color-egypt-dark:    #0F273F;
}

:root,
[data-theme="light"] {
  --surface-primary:      var(--color-shell-white);
  --surface-elevated:     var(--color-gypsum);        /* #F5F0E6          */
  --surface-hover:        var(--color-aged-gypsum);   /* #EDE7D9          */

  /* Text */
  --text-primary:         var(--color-bitumen);        /* 15.3:1 AAA vs white */
  --text-secondary:       var(--color-deep-clay);       /*  7.5:1 AAA vs white */
  --text-tertiary:        var(--color-clay-border);     /*  4.3:1 lg vs white  */
  --text-brand:           var(--color-deep-clay);

  /* Interactive */
  --interactive-primary:  var(--color-deep-gold);      /*  4.7:1 AA vs white  */
  --interactive-hover:    var(--color-antique-gold);
  --interactive-brand:    var(--color-deep-clay);
  --link-color:           var(--color-antique-gold);    /*  5.6:1 AA vs white  */
  --link-hover:           var(--color-deep-gold);
  --focus-ring:           var(--color-deep-gold);

  /* Borders */
  --border-default:       rgba(92, 74, 48, 0.12);
  --border-hover:         rgba(92, 74, 48, 0.25);
  --border-strong:        rgba(92, 74, 48, 0.40);

  /* Semantic states */
  --color-success:        var(--color-malachite-deep);
  --color-success-bg:     var(--color-malachite-bg);
  --color-success-text:   var(--color-malachite-deep);

  --color-warning:        var(--color-ochre-burnt);
  --color-warning-bg:     var(--color-ochre-bg);
  --color-warning-text:   var(--color-ochre-burnt);

  --color-danger:         var(--color-carnelian-deep);
  --color-danger-bg:      var(--color-carnelian-bg);
  --color-danger-text:    var(--color-carnelian-deep);

  --color-info:           var(--color-egypt-deep);
  --color-info-bg:        var(--color-egypt-bg);
  --color-info-text:      var(--color-egypt-deep);
  --color-bg:             var(--surface-primary);
  --color-bg-deep:        var(--color-gypsum);          /* footer bg in light */
  --color-brand:          var(--color-deep-clay);
  --color-cta:            var(--interactive-primary);
  --color-link:           var(--link-color);
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-error:          var(--color-danger);           /* alias for --color-danger */
}

[data-theme="dark"] {
  /* Surfaces */
  --surface-primary:      var(--color-night-lapis);
  --surface-elevated:     var(--color-deep-lapis);
  --surface-hover:        var(--color-lapis-mid);

  /* Text */
  --text-primary:         var(--color-river-sand);      /* 11.8:1 AAA */
  --text-secondary:       var(--color-faded-sand);       /*  7.6:1 AAA */
  --text-tertiary:        var(--color-dry-clay);          /*  4.2:1 lg  */
  --text-brand:           var(--color-brand-gold);        /*  6.8:1 AA  */

  /* Interactive */
  --interactive-primary:  var(--color-bright-gold);      /*  7.9:1 AAA */
  --interactive-hover:    var(--color-light-gold);
  --interactive-brand:    var(--color-brand-gold);
  --link-color:           var(--color-light-gold);
  --link-hover:           var(--color-river-sand);
  --focus-ring:           var(--color-bright-gold);

  /* Borders */
  --border-default:       rgba(198, 156, 62, 0.12);
  --border-hover:         rgba(198, 156, 62, 0.25);
  --border-strong:        rgba(198, 156, 62, 0.40);

  /* Semantic states */
  --color-success:        var(--color-malachite);
  --color-success-bg:     rgba(61, 122, 74, 0.12);
  --color-success-text:   var(--color-malachite-mid);

  --color-warning:        var(--color-ochre);
  --color-warning-bg:     rgba(184, 134, 43, 0.12);
  --color-warning-text:   var(--color-ochre-mid);

  --color-danger:         var(--color-carnelian);
  --color-danger-bg:      rgba(166, 58, 42, 0.12);
  --color-danger-text:    var(--color-carnelian-mid);

  --color-info:           var(--color-egypt-blue);
  --color-info-bg:        rgba(29, 78, 126, 0.12);
  --color-info-text:      var(--color-egypt-mid);
  --color-bg:             var(--surface-primary);
  --color-bg-deep:        var(--color-abyss);           /* #091728 footer bg   */
  --color-brand:          var(--color-brand-gold);
  --color-cta:            var(--interactive-primary);
  --color-link:           var(--link-color);
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-error:          var(--color-danger);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces */
    --surface-primary:      var(--color-night-lapis);
    --surface-elevated:     var(--color-deep-lapis);
    --surface-hover:        var(--color-lapis-mid);
    /* Text */
    --text-primary:         var(--color-river-sand);
    --text-secondary:       var(--color-faded-sand);
    --text-tertiary:        var(--color-dry-clay);
    --text-brand:           var(--color-brand-gold);
    /* Interactive */
    --interactive-primary:  var(--color-bright-gold);
    --interactive-hover:    var(--color-light-gold);
    --interactive-brand:    var(--color-brand-gold);
    --link-color:           var(--color-light-gold);
    --link-hover:           var(--color-river-sand);
    --focus-ring:           var(--color-bright-gold);
    /* Borders */
    --border-default:       rgba(198, 156, 62, 0.12);
    --border-hover:         rgba(198, 156, 62, 0.25);
    --border-strong:        rgba(198, 156, 62, 0.40);
    /* Semantic */
    --color-success:        var(--color-malachite);
    --color-danger:         var(--color-carnelian);
    --color-warning:        var(--color-ochre);
    --color-info:           var(--color-egypt-blue);
    /* Aliases */
    --color-bg:             var(--color-night-lapis);
    --color-bg-deep:        var(--color-abyss);
    --color-brand:          var(--color-brand-gold);
    --color-cta:            var(--color-bright-gold);
    --color-link:           var(--color-light-gold);
    --color-text-primary:   var(--color-river-sand);
    --color-text-secondary: var(--color-faded-sand);
    --color-error:          var(--color-carnelian);
  }
}


/* ============================================================
   7. SPACING SCALE — 4px base grid
   ============================================================ */

:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
}


/* ============================================================
   8. LAYOUT & COMPONENT TOKENS
   ============================================================ */

:root {
  /* Border radius */
  --radius-sm:     0.25rem;  /*  4px — pills, tags      */
  --radius-md:     0.5rem;   /*  8px — buttons, inputs   */
  --radius-lg:     0.75rem;  /* 12px — cards             */
  --radius-xl:     1rem;     /* 16px — modals, panels    */
  --radius-full:   9999px;   /* Circles, full-round      */
  --radius-tablet: 0.563rem; /*  9px — clay tablet mark  */

  /* Shadows — minimal, warm-tinted */
  --shadow-sm:     0 1px 3px rgba(6, 14, 26, 0.12);
  --shadow-md:     0 4px 12px rgba(6, 14, 26, 0.16);
  --shadow-lg:     0 10px 32px rgba(6, 14, 26, 0.24);

  /* Max content width */
  --max-width-content: 72rem;   /* 1152px */
  --max-width-narrow:  40rem;   /*  640px — forms, auth   */
  --max-width-reading: 65ch;    /* Optimal line length     */

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index scale */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}


/* ============================================================
   10. UTILITY CLASSES
   ============================================================ */

/* Direction */
[dir="rtl"],
.rtl { direction: rtl; }

[dir="ltr"],
.ltr { direction: ltr; }

/* Arabic font application */
.ar,
[lang="ar"],
[lang="ckb"] {
  font-family: var(--font-ar);
  line-height: var(--lh-body-ar);
}

.ar-display,
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ckb"] h1,
[lang="ckb"] h2,
[lang="ckb"] h3 {
  font-family: var(--font-ar-disp);
}

/* Cuneiform glyph rendering */
.cuneiform {
  font-family: var(--font-cuneiform);
  font-size: inherit;
  line-height: 1;
}

@media (forced-colors: active) {
  :root {
    --color-brand-gold:   ButtonText;
    --color-bright-gold:  ButtonText;
    --interactive-primary: ButtonText;
    --link-color:          LinkText;
    --focus-ring:          Highlight;
    --border-default:      ButtonText;
  }
}