/* ============================================================
   Khama (خامة) — Iraqi Graduation Regalia
   Tokens: deep emerald + ink black + cream paper
   Type: Thmanyah three-family (Display / Text / Sans)
   ============================================================ */

/* ---- Fonts (Thmanyah, used under license for Arabic typography) ---- */
@font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyah-sans-Light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyah-sans-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyah-sans-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyah-sans-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyah-sans-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }

@font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyah-serif-display-Light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyah-serif-display-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyah-serif-display-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyah-serif-display-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyah-serif-display-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }

@font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyah-serif-text-Light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyah-serif-text-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyah-serif-text-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyah-serif-text-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyah-serif-text-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }

:root {
  /* --- Khama brand palette (burgundy + blush) --- */
  --emerald-deep:  #5d022a;   /* PRIMARY — deep burgundy */
  --emerald-ink:   #44011e;   /* deeper variant for hover/press */
  --emerald-soft:  #f7d9e0;   /* tint of burgundy on blush */
  --ink:           #1a0a10;   /* near-black with burgundy undertone */
  --ink-soft:      #2c1820;
  --cream:         #fef0f0;   /* PAPER — blush surface */
  --cream-warm:    #fbe2e2;   /* warmer blush for layered cards */
  --paper:         #fef0f0;   /* full page background */
  --gold:          #b08152;   /* warm tan accent (used sparingly) */
  --gold-soft:     #e8c8a8;
  --gray:          #7a5862;   /* muted text — burgundy-tinted gray */
  --gray-line:     #ecd1d4;   /* hairlines on blush */

  /* --- Status --- */
  --success: #2f8a5a;
  --error:   #b53e3e;

  /* --- Roles --- */
  --bg:          var(--paper);
  --bg-emerald:  var(--emerald-deep);
  --bg-ink:      var(--ink);
  --bg-cream:    var(--cream);
  --fg:          var(--ink);
  --fg-muted:    var(--gray);
  --fg-on-emerald: #ffffff;
  --accent:      var(--emerald-deep);
  --line:        var(--gray-line);

  /* --- Type families (Thmanyah only, no Latin fallbacks) --- */
  --font-display: "Thmanyah Serif Display", serif;
  --font-text:    "Thmanyah Serif Text", serif;
  --font-ui:      "Thmanyah Sans", sans-serif;

  /* --- Type scale --- */
  --fs-display-xl: clamp(64px, 11vw, 180px);
  --fs-display-lg: clamp(48px, 7vw, 120px);
  --fs-h1:         clamp(40px, 5vw, 80px);
  --fs-h2:         clamp(28px, 3.5vw, 52px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    20px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  /* --- Spacing (4px grid) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* --- Radius --- */
  --r-xs: 3px; --r-sm: 12px; --r-md: 20px; --r-lg: 24px;
  --r-xl: 32px; --r-2xl: 42px; --r-3xl: 64px; --r-pill: 500px;

  /* --- Shadow --- */
  --shadow-1: 0 1px 2px rgba(10, 30, 22, 0.08);
  --shadow-2: 0 0 0 1px rgba(10, 30, 22, 0.08);
  --shadow-3: 0 12px 32px rgba(10, 30, 22, 0.12);

  /* --- Layout --- */
  --container: 1200px;
}

html, body { margin: 0; }
html { font-family: var(--font-text); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-body); line-height: var(--lh-body); }

h1,.h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: -0.01em; margin: 0; }
h2,.h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: var(--lh-heading); margin: 0; }
h3,.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }
h4,.h4 { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-heading); margin: 0; }

p,.body { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: 0.02em; }
.eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-body-sm); color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; }
.numeric { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }