/*
 * IRAQNOMX brand tokens — the single source of truth for colour and type
 * across iraqnomx.com and every subdomain.
 *
 * Values come from the brand guideline documents in D:\MyProjects\branding
 * (each brand folder holds a brand-guidelines.html). Change a colour there
 * first, then here — never the other way round, and never in a page.
 *
 * HOW TO USE
 *   1. Link this file before the page's own stylesheet:
 *        <link rel="stylesheet" href="/brand.css">
 *   2. Name the brand on <html> (IRAQNOMX is the default and needs nothing):
 *        <html lang="ar" dir="rtl" data-brand="haris">
 *   3. Load the fonts the brand names — this file sets the family tokens but
 *      never loads a font file. The stack for each brand is listed below it.
 *   4. In page CSS, use the semantic tokens (--brand-primary, --brand-ink …)
 *      rather than a raw palette value, so one page works for any brand.
 *
 * Every brand below defines the SAME semantic token names, so a component
 * styled against them is brand-agnostic. The raw palette tokens (--iqx-*,
 * --haris-*, --today-*) are there when you need an exact brand colour.
 */

/* ------------------------------------------------------------------ *
 * Shared primitives — not brand-specific
 * ------------------------------------------------------------------ */
:root {
  --brand-radius: 4px;
  --brand-radius-lg: 14px;
  --brand-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
  --brand-shadow-lg: 0 10px 30px rgba(15, 23, 42, .08);

  /* Arabic needs more leading than Latin; these are the floors, not targets. */
  --brand-line-height: 1.8;
  --brand-line-height-tight: 1.4;
}

/* ------------------------------------------------------------------ *
 * IRAQNOMX — the default brand
 * Fonts: Montserrat (Latin display) + IBM Plex Sans Arabic (Arabic, body)
 *   https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;700&display=swap
 * ------------------------------------------------------------------ */
:root,
[data-brand="iraqnomx"] {
  /* Palette */
  --iqx-gold: #DDA715;
  --iqx-gold-deep: #B9880E;
  --iqx-teal: #336666;
  --iqx-teal-dark: #1F4747;
  --iqx-tint: #F3EBD6;
  --iqx-paper: #FBFAF6;
  --iqx-ink: #16302F;

  /* Semantic */
  --brand-primary: var(--iqx-teal);
  --brand-primary-hover: var(--iqx-teal-dark);
  --brand-on-primary: #ffffff;
  --brand-accent: var(--iqx-gold);
  --brand-accent-hover: var(--iqx-gold-deep);
  --brand-on-accent: var(--iqx-teal-dark);

  --brand-ink: var(--iqx-ink);
  --brand-ink-soft: #3c4b49;
  --brand-muted: #5a6b6a;
  --brand-line: #dfe4e1;
  --brand-bg: var(--iqx-paper);
  --brand-surface: #ffffff;
  --brand-surface-2: var(--iqx-tint);
  --brand-dark: var(--iqx-teal-dark);
  --brand-on-dark: #ffffff;
  --brand-on-dark-muted: #bcd3d3;

  /* Type — Arabic-first, so --brand-font leads */
  --brand-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --brand-font-en: "Montserrat", "Segoe UI", Arial, sans-serif;
  --brand-font-display: "Montserrat", "IBM Plex Sans Arabic", sans-serif;
}

/* ------------------------------------------------------------------ *
 * HARIS — حارس · haris.iraqnomx.com
 * Fonts: Cairo (display) + Tajawal (body), both Arabic + Latin
 *   https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Tajawal:wght@400;500;700&display=swap
 * ------------------------------------------------------------------ */
[data-brand="haris"] {
  /* Palette */
  --haris-red: #ED2128;
  --haris-red-dark: #C4161C;
  --haris-black: #000000;
  --haris-gray: #4D4D4D;
  --haris-gray-light: #9A9A9A;
  --haris-off-white: #F7F6F5;

  /* Semantic */
  --brand-primary: var(--haris-red);
  --brand-primary-hover: var(--haris-red-dark);
  --brand-on-primary: #ffffff;
  --brand-accent: var(--haris-black);
  --brand-accent-hover: var(--haris-gray);
  --brand-on-accent: #ffffff;

  --brand-ink: #141414;
  --brand-ink-soft: #3a3a3a;
  --brand-muted: var(--haris-gray);
  --brand-line: #d9d9d9;
  --brand-bg: #ffffff;
  --brand-surface: #ffffff;
  --brand-surface-2: var(--haris-off-white);
  --brand-dark: var(--haris-black);
  --brand-on-dark: #ffffff;
  --brand-on-dark-muted: #bdbdbd;

  /* Type */
  --brand-font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --brand-font-en: "Tajawal", "Segoe UI", Arial, sans-serif;
  --brand-font-display: "Cairo", "Tajawal", sans-serif;
}

/* ------------------------------------------------------------------ *
 * TODAY — العراق الاقتصادي · today.iraqnomx.com
 * Fonts: El Messiri (display) + Tajawal (body), both Arabic + Latin
 *   https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap
 * ------------------------------------------------------------------ */
[data-brand="today"] {
  /* Palette */
  --today-blue: #008DD1;
  --today-blue-dark: #006FA6;
  --today-gold: #D18F00;
  --today-orange: #D14F00;
  --today-navy: #294452;
  --today-olive: #524529;
  --today-sky: #E6F4FB;

  /* Semantic */
  --brand-primary: var(--today-blue);
  --brand-primary-hover: var(--today-blue-dark);
  --brand-on-primary: #ffffff;
  --brand-accent: var(--today-orange);
  --brand-accent-hover: #A93F00;
  --brand-on-accent: #ffffff;

  --brand-ink: #20303a;
  --brand-ink-soft: #3a4e5a;
  --brand-muted: #5a6e7a;
  --brand-line: #dde5ea;
  --brand-bg: #FAFBFC;
  --brand-surface: #ffffff;
  --brand-surface-2: var(--today-sky);
  --brand-dark: var(--today-navy);
  --brand-on-dark: #ffffff;
  --brand-on-dark-muted: #b9c8d1;

  /* Type */
  --brand-font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --brand-font-en: "Tajawal", "Segoe UI", Arial, sans-serif;
  --brand-font-display: "El Messiri", "Tajawal", sans-serif;
}

/* ------------------------------------------------------------------ *
 * Base application of the tokens. Pages may override anything below;
 * nothing here sets layout.
 * ------------------------------------------------------------------ */
body {
  font-family: var(--brand-font);
  color: var(--brand-ink);
  background: var(--brand-bg);
}

html[lang="en"] body,
.en {
  font-family: var(--brand-font-en);
}