/* Basem Shaaban Consulting: web design tokens, v0.2
   Source of truth: Brand Identity Guide v1.0 (July 2026) and the Brand Template (.pptx).
   Layers: primitive -> semantic -> component. Components never use raw hex or px.
   Print, Word and PowerPoint use Cambria + Calibri (see DESIGN-SYSTEM.md); the website uses the fonts below. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* taste-skill-ignore: brand guide mandates it for URLs and file names only */
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---------- 1. PRIMITIVE ---------- */
  /* Brand colors, exactly as in the Brand Identity Guide */
  --navy: #0B2138;
  --teal: #2FA6A0;
  --gold: #C9A24B;
  --white: #FFFFFF;
  --ice: #F0F6F6;
  --steel: #6B8A99;
  /* Tones already used in the official PowerPoint template */
  --navy-panel: #1A2E42;
  --navy-panel-2: #2A3E52;
  --mist: #D8E8E5;
  /* PROPOSED AMENDMENT (needs owner approval): text-safe shades.
     Brand teal and steel fail 4.5:1 as small text on white or ice. */
  --teal-text: #1A7570;   /* 5.49:1 on white, 5.03:1 on ice */
  --steel-text: #4F6B7A;  /* 5.65:1 on white, 5.17:1 on ice */

  /* Space (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: 5rem; --space-9: 8rem;
  --margin: clamp(1rem, 3vw, 2.5rem);          /* one pair of equal outer margins */
  --section-gap: clamp(3.5rem, 7vw, 6.5rem);     /* clearly larger than any gap inside a section */

  /* Type scale (rem on a 16px root). Nothing below 0.875rem. */
  --size-small: 0.9375rem;   /* 15px: captions, meta */
  --size-body: 1.0625rem;    /* 17px: running text */
  --size-lead: 1.25rem;      /* 20px: lead paragraphs */
  --size-h3: 1.25rem;        /* 20px */
  --size-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);   /* 28 to 40px */
  --size-h1: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);    /* 36 to 60px */
  --size-stat: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);  /* big numbers */

  --measure: 62ch;
  --container: 80rem;

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 2. SEMANTIC ---------- */
  --bg: var(--white);
  --bg-alt: var(--ice);
  --bg-inverse: var(--navy);
  --bg-field: var(--teal);
  --surface-on-inverse: var(--navy-panel);
  --surface: var(--white);            /* a card on an alternate (ice) ground */
  --surface-alt: var(--ice);          /* a card on the page ground */
  --heading: var(--navy);
  --chip-hover: var(--mist);
  --action-hover-bg: var(--navy);
  --action-hover-text: var(--gold);

  --text: var(--navy);
  --text-muted: var(--steel-text);
  --text-link: var(--teal-text);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--mist);
  --text-on-field: var(--navy);        /* white on teal is 2.96:1, so text on a teal field is navy */

  --accent-on-dark: var(--teal);
  --prestige-on-dark: var(--gold);

  --action-bg: var(--gold);
  --action-text: var(--navy);
  --action-alt-bg: var(--navy);
  --action-alt-text: var(--white);

  --field-edge: var(--steel);          /* form fields only; 3.67:1 on white */
  --focus: var(--teal-text);
  --danger: #B3261E;                   /* error text only; 6.5:1 on white */

  /* Script-aware type (English defaults) */
  --font-display: "Fraunces", "Cambria", Georgia, serif;
  --font-body: "Inter", "Calibri", system-ui, sans-serif;
  --font-file: "IBM Plex Mono", "Courier New", monospace;   /* URLs, file names, code only */
  --display-weight: 700;
  --script-scale: 1;
  --lh-body: 1.6;
  --lh-display: 1.08;
  --lh-title: 1.15;
  --tracking-display: -0.02em;
  --tracking-title: -0.015em;

  /* ---------- 3. COMPONENT ---------- */
  --radius: 0;                          /* square everywhere; the monogram is the only circle */
  --button-min-height: 2.75rem;         /* 44px touch target */
  --button-pad-x: var(--space-5);
  --card-pad: var(--space-6);
}

/* Arabic and Kurdish (Sorani) */
:lang(ar), :lang(ckb), [dir="rtl"] {
  --font-display: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Cambria", serif;
  --font-body: "IBM Plex Sans Arabic", "Calibri", system-ui, sans-serif;
  --script-scale: 1.08;
  --lh-body: 1.9;
  --lh-display: 1.35;     /* tall enough for Arabic marks */
  --lh-title: 1.5;
  --tracking-display: 0;  /* never track Arabic script */
  --tracking-title: 0;
  --display-weight: 700;
}


/* ---------- Dark mode: semantic tokens only; components do not change ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B2138;
  --bg-alt: #0F2A44;
  --bg-inverse: #071626;
  --surface: #17354F;        /* card on an alternate ground */
  --surface-alt: #122D47;    /* card on the page ground */
  --surface-on-inverse: #12283D;
  --heading: #FFFFFF;
  --text: #F0F6F6;
  --text-muted: #B4C9D3;
  --text-link: #5CC3BD;
  --teal-text: #5CC3BD;
  --steel-text: #B4C9D3;
  --focus: #5CC3BD;
  --field-edge: #7E9CAA;
  --danger: #FF9A92;
  --chip-hover: #24445F;
  --action-alt-bg: #D8E8E5;
  --action-alt-text: #0B2138;
  --action-hover-bg: #FFFFFF;
  --action-hover-text: #0B2138;
  --navy-panel: #1A2E42;
}
html[data-theme="dark"] .skip { background: var(--gold); color: var(--navy); }
html[data-theme="dark"] .portrait { background: var(--surface); }
html[data-theme="dark"] img.invert-dark { filter: none; }

/* ---------- Base ---------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(var(--size-body) * var(--script-scale));
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums tabular-nums;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-title);
  text-wrap: balance;
  margin: 0;
}
p { max-inline-size: var(--measure); margin-block: 0 var(--space-4); }
a { color: var(--text-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.file { font-family: var(--font-file); font-size: 0.9em; direction: ltr; unicode-bidi: isolate; }

/* Browser surfaces carry the palette */
::selection { background: var(--teal); color: var(--navy); }
input, textarea, select { caret-color: var(--teal-text); accent-color: var(--teal-text); }
html { scrollbar-color: var(--steel) var(--bg-alt); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--teal); }

/* ---------- Sections: change of ground, never a line ---------- */
.ground-white { background: var(--bg); color: var(--text); }
.ground-ice { background: var(--bg-alt); color: var(--text); }
.on-dark, .ground-navy { background: var(--bg-inverse); color: var(--text-inverse); }
.ground-teal { background: var(--bg-field); color: var(--text-on-field); }
.on-dark .muted { color: var(--text-inverse-muted); }
.muted { color: var(--text-muted); }
.on-dark a { color: var(--mist); }
.ground-teal a { color: var(--navy); }
.ground-teal .btn-dark { color: var(--white); }

/* ---------- Buttons: flat, square, one fill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--button-min-height);
  padding-inline: var(--button-pad-x);
  border: 0; border-radius: var(--radius);
  font: 600 1rem/1 var(--font-body);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--action-bg); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover-bg); color: var(--action-hover-text); }
.btn-dark { background: var(--action-alt-bg); color: var(--action-alt-text); }
.btn-dark:hover { background: var(--teal-text); }
.on-dark .btn-primary:hover { background: var(--white); color: var(--navy); }
.on-dark .btn-dark { background: var(--ice); color: var(--navy); }
.on-dark .btn-dark:hover { background: var(--gold); }
.text-link { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }

/* ---------- Card: a step in tone, flat, no border ---------- */
.card { background: var(--surface-alt); padding: var(--card-pad); border-radius: var(--radius); }
.ground-ice .card { background: var(--surface); }
.on-dark .card { background: var(--surface-on-inverse); }

/* ---------- Form fields (the one place lines are allowed) ---------- */
.field label { display: block; font-weight: 600; margin-block-end: var(--space-1); }
.field input, .field textarea, .field select {
  inline-size: 100%; min-block-size: 2.75rem; padding: var(--space-2) var(--space-3);
  background: var(--bg); color: var(--text); font: inherit;
  border: 1.5px solid var(--field-edge); border-radius: var(--radius);
}
.field .hint { color: var(--text-muted); font-size: var(--size-small); margin-block-start: var(--space-1); }
.field .error { color: var(--danger); font-size: var(--size-small); margin-block-start: var(--space-1); }

/* ---------- Motion: the headline mask is the one authored moment ---------- */
.mask { display: block; overflow: hidden; padding-block-end: 0.08em; }
.mask > span { display: inline-block; transform: translateY(105%); animation: rise var(--dur-reveal) var(--ease-out) forwards; }
.mask:nth-child(2) > span { animation-delay: 120ms; }
@keyframes rise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .mask > span { transform: none; }
}