/* AryaTech brand v2 — the ONE place colours, type, spacing, radius and shadow are defined for the portal.
   Source (read-only): Arya Website/brand/BRAND_V2/BRAND.md «متغيرات CSS» + tokens.json (light theme). See docs/BRAND_V2.md.
   Section 1 is copied letter for letter from the guide. Section 2 is derived from section 1 (the recipe is in each
   comment and tests/test_brand_v2.py recomputes it). Nothing else in the portal writes a colour. */
:root {
  /* 1 ── brand tokens, verbatim ─────────────────────────────────────── */
  --navy: #1F2A4B;
  --mint: #54BAA7;
  --charcoal: #1E1E1E;
  --mint-ink: #167565;
  --mint-soft: #E0F2EE;
  --surface: #F1F2F2;
  --surface-post: #DCDCDE;
  --surface-raised: #FFFFFF;
  --surface-navy: #1F2A4B;
  --ink: #1F2A4B;
  --ink-muted: #455068;       /* owner decision 2026-10-25: darker than the guide's #4F5A73 (6.2:1 → 7.2:1 on --surface; 5.9:1 on --surface-post) */
  --on-mint: #1F2A4B;
  --on-navy: #FFFFFF;
  --line: #DDE1E6;
  --border-strong: #7A8499;
  --focus: #167565;
  --gray-shape: #CBCBCB;
  --offer: #CF5555;
  --offer-ink: #B23F3F;
  --danger: #B42318;
  --warning: #A15C07;
  --dot-grey-1: #E0E0E2;
  --dot-grey-2: #E3E3E5;
  --dot-grey-3: #E6E6E8;
  --dot-navy-1: #25315A;
  --dot-navy-2: #29355F;
  --dot-navy-3: #2D3A65;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Families as tokens.json defines them: Montserrat first, so digits and Latin letters inside Arabic text are drawn
     with Montserrat (its files are limited to the Latin range), and Arabic falls through to Alexandria / Noto Kufi. */
  --font-heading: "Montserrat", "Alexandria", system-ui, sans-serif;
  --font-body: "Montserrat", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-latin: "Montserrat", system-ui, sans-serif;
  --font-accent: "Arya Dots 2", "Montserrat", sans-serif;

  /* Type styles (tokens.json → type.groups): size / line height / weight */
  --t-h1: 700 28px/38px var(--font-heading);
  --t-h2: 600 22px/32px var(--font-heading);
  --t-body: 400 17px/28px var(--font-body);
  --t-label: 500 15px/22px var(--font-heading);
  --t-caption: 400 13px/20px var(--font-body);
  --t-number-xl: 700 64px/68px var(--font-latin);
  --t-number-md: 600 24px/32px var(--font-latin);

  /* 2 ── derived from section 1 ─────────────────────────────────────── */
  --danger-soft: #F9EDED;    /* danger 8% over white  */
  --danger-line: #E5B2AE;    /* danger 35% over white */
  --warning-soft: #F7F2EB;   /* warning 8% over white  */
  --warning-line: #DEC6A8;   /* warning 35% over white */
  --mint-line: #B2E0D7;      /* mint 45% over white: decorative border of mint-soft boxes */
  --mint-hover: #4EA99C;     /* mint 88% + navy 12%: hover of the primary button (navy text stays ≥ 4.5:1) */
  --navy-hover: var(--dot-navy-3);
  --mint-ink-hover: #176A61; /* mint-ink 85% + navy 15%: hover of the office primary button (white text stays ≥ 4.5:1) */
  /* The ONE approved exception to «three fonts» (owner's decision, 2026-10-10): a monospace for sensitive literal values
     only — password, username, serial, MAC, one-time codes and keys — because Montserrat draws l, I and | alike.
     Used by a single rule (.mono in css/app.css) and by Page.literal(mono=True) in the PDF. Never for IP, dates, phone
     numbers, amounts or any other text. */
  --font-literal: "IBM Plex Mono", "Montserrat", "Noto Kufi Arabic", system-ui, monospace;
  --scrim: rgba(31, 42, 75, .45);                       /* navy at 45% behind sheets and the menu */
  --shadow-card: 0 2px 12px rgba(31, 42, 75, .08);      /* the single shadow of the guide, on v2 navy */

  /* 3 ── roles that must not follow the colour scheme (they are NOT redefined in the dark block below) ───────── */
  color-scheme: light;
  --bar: var(--surface-navy);        /* the office top bar: navy in both schemes */
  --on-bar: #FFFFFF;
  --bar-hover: var(--dot-navy-3);
  --bar-hover-2: var(--dot-navy-2);
  --on-bar-soft: #E0F2EE;            /* secondary text on the bar (the mint-soft of the light scheme) */
  --on-bar-line: #DDE1E6;            /* placeholders and hints on the bar (the line colour of the light scheme) */
  --pad-paper: #FFFFFF;              /* the signature pad: black ink on white paper in both schemes (it is saved as a picture) */
  --pad-ink: #1E1E1E;
  --logo-plate: #FFFFFF;             /* the logo files are navy on transparent: on dark pages they sit on this plate, never recoloured */
}

/* Right-to-left pages (Arabic, Urdu): the order of BRAND.md («متغيرات CSS»): the Arabic font first, so the space
   between Arabic words comes from it and Montserrat is fetched only for real Latin letters and digits. Digits and
   Latin are Montserrat in both orders, because the Arabic faces are limited to the Arabic range (css/app.css). */
:root[dir="rtl"] {
  --font-heading: "Alexandria", "Montserrat", system-ui, sans-serif;
  --font-body: "Noto Kufi Arabic", "Montserrat", system-ui, sans-serif;
}

/* Dark scheme (owner decision 2026-10-25): follows the system only — there is no manual theme switch in the portal.
   Derived from the brand: the navy family for surfaces, the mint for accents. «--navy» becomes the strong ink (it is
   used both as text and as the fill of solid controls, whose text is «--on-navy»), «--mint» and «--on-mint» keep the
   guide's values so the primary button looks the same. Contrast is computed from these values by
   tests/test_brand_v2.py (text ≥ 4.5:1, controls ≥ 3:1), exactly as for the light scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #0F1426;
    --surface-raised: #172038;
    --surface-post: #1F2946;
    --ink: #E9EDF6;
    --ink-muted: #AEB8CE;
    --navy: #E9EDF6;
    --on-navy: #0F1426;
    --navy-hover: #CDD5E8;
    --line: #2C3655;
    --border-strong: #7D88A8;
    --focus: #7ED8C6;
    --mint-ink: #7ED8C6;
    --mint-ink-hover: #69C8B6;
    --mint-soft: #163430;
    --mint-line: #2A6A60;
    --gray-shape: #3A4466;
    --offer: #E58A8A;
    --offer-ink: #F2A0A0;
    --danger: #FF8F85;
    --danger-soft: #3A1D24;
    --danger-line: #7B3B42;
    --warning: #F2B35E;
    --warning-soft: #35291A;
    --warning-line: #7C5A2B;
    --dot-grey-1: #1B2440;
    --dot-grey-2: #1E2744;
    --dot-grey-3: #212A48;
    --scrim: rgba(5, 8, 18, .65);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, .35);
  }
}