/* ==========================================================================
   Zerak SEO — the Zerak brand system, applied. Single source of truth for the
   identity here; every page links this and carries only its own layout.

   One palette for the whole company: black, ivory and gold. The token NAMES below
   are historical (this app was built as Baxter, in green) and are kept so no page
   had to change — read --green as "the brand colour" and --green-deep as "the dark
   band". On white, gold is the darker #8a6a1f so it passes contrast as text; the
   bright #c9a24b is for dark grounds.

   Green now has one job only: good news (a ranking that rose, a check that passed).
   It is no longer the brand, so status and brand can never be confused.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* brand — richer and more saturated than a boutique pine. Deep enough to hold a
     full-bleed hero, bright enough to read as confident rather than careful. */
  --green:#8a6a1f;
  --green-hover:#735819;
  --green-deep:#14120f;      /* full-bleed hero and dark bands */
  --green-soft:#f4eedf;
  --green-line:#e5d8b8;
  --on-green:#FFFFFF;
  /* Priority ramp. The console renders task priority 1-4 as a coloured badge via
     --p1..--p4, but those were never defined anywhere: the background fell back to
     transparent and the white number on it was invisible on a light card. Aliased to the
     severity ramp, which is the same escalation and is already theme-aware. */
  --p1:var(--sev-critical); --p2:var(--sev-high);
  --p3:var(--sev-medium);   --p4:var(--sev-low);
  /* Foreground for any badge sitting on a severity or priority colour. Those colours are
     dark in light mode and light in dark mode, so text on them has to flip too. */
  --on-sev:#FFFFFF;

  /* The accent. Used sparingly and almost always on the deep green — a CTA, a live
     number, one word in a headline. This is the thing that makes the palette feel
     international rather than quiet; deep green alone is a colour, deep green with a
     vivid partner is a brand. */
  --accent:#c9a24b;
  --accent-ink:#14120f;      /* text on accent */
  --accent-dim:#dbb968;

  /* warm neutrals */
  --ground:#f7f6f3;
  --panel:#FFFFFF;
  --panel-2:#efede8;
  --line:#e4e1da;
  --ink:#14120f;
  --ink-2:#3d3a34;
  --ink-3:#6b665e;   /* AA on panel-2 (4.62), ground (5.08) and panel (5.32) */

  /* semantic — positive IS the brand */
  --good:#1f7a4d;      --good-soft:#e3f1e8;
  --warn:#9E6007;      --warn-soft:#FBF1DC;   /* 4.53 on its soft tint (was 4.39) */
  --crit:#B02A37;      --crit-soft:#FAE8EA;

  /* Audit severity ramp, kept clear of the brand so findings read at a glance.
     Each has a soft tint for the badge behind it. */
  --sev-critical:#B02A37;   --sev-critical-soft:#FAE8EA;
  --sev-high:#C0400C;       --sev-high-soft:#FCEBE0;   /* 4.55 (was 4.46) */
  --sev-medium:#9E6007;     --sev-medium-soft:#FBF1DC;   /* 4.53 (was 4.39) */
  --sev-low:#6b665e;        --sev-low-soft:#EFEEE9;   /* 4.58 (was 3.97); matches --ink-3 */

  --radius:13px;
  --shadow:0 1px 2px rgba(20,18,15,.05), 0 12px 30px -20px rgba(20,18,15,.30);

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

/* Dark is for the team console only. Client-facing pages commit to light: they get
   printed, screenshotted into WhatsApp and opened on a reception desk, and must look
   identical everywhere. */
.theme-auto{ color-scheme: light dark; }
@media (prefers-color-scheme: dark){
  .theme-auto:not([data-theme="light"]){
    --ground:#14120f;
    --panel:#1c1a16;
    --panel-2:#23201b;
    --line:#2b2723;
    --ink:#f0ede6;
    --ink-2:#c2bcb0;
    --ink-3:#9a948a;
    --green:#c9a24b;
    --green-hover:#dbb968;
    --green-soft:#2a2417;
    --green-line:#4a3f25;
    --on-green:#14120f;
    --on-sev:#14120f;
    --good:#5fbf8a;      --good-soft:#14301f;
    --warn:#D9A24D;      --warn-soft:#33280F;
    --crit:#F0808D;      --crit-soft:#3A181D;
    --sev-critical:#F0808D;
    --sev-high:#EFA277;
    --sev-medium:#D9A24D;
    --sev-low:#9a948a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -20px rgba(0,0,0,.8);
  }
}

/* ---- primitives ---------------------------------------------------------- */
.font-display{ font-family:var(--font-display); }
.mono,.n,.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Logo — Zāy. The Latin Z under the dot of the Persian/Arabic letter ز, then "erak",
   then SEO. Drawn, not typed; geometry and rules in zerak-site/brand/README.md.
   Markup: <a class="logo"><svg class="z">…</svg><span class="sr-only">Z</span>erak<span class="lsub"> SEO</span></a>
   Everything is in em, so one rule covers every size. */
.logo{
  display:inline-flex;align-items:baseline;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:20px;font-variation-settings:'wdth' 100;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1;
}
.logo .z{display:inline-block;height:.94em;width:auto;flex:none;margin-right:.035em;color:currentColor}
.logo .z .dot{fill:#8a6a1f}
.logo .lsub{margin-left:.26em;font-weight:500;letter-spacing:.02em;color:#8a6a1f}
.logo.on-dark{color:#f0ede6}
.logo.on-dark .z .dot{fill:#c9a24b}
.logo.on-dark .lsub{color:#dbb968}

.btn{
  display:inline-block;background:var(--green);color:var(--on-green);border:0;
  padding:12px 24px;border-radius:10px;cursor:pointer;text-decoration:none;
  font:600 15px var(--font-body);letter-spacing:.01em;
}
.btn:hover{ background:var(--green-hover); }
.btn:disabled{ opacity:.45;cursor:default; }
.btn.sm{ padding:7px 15px;font-size:13px;border-radius:8px; }
.btn.ghost{ background:transparent;color:var(--ink-2);border:1px solid var(--line); }
.btn.ghost:hover{ background:var(--panel-2); }
/* The accent button exists for one job: the primary action on a deep-green surface. */
.btn.accent{ background:var(--accent);color:var(--accent-ink);font-weight:700; }
.btn.accent:hover{ background:var(--accent-dim); }

.tag{
  display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:5px;
  background:var(--panel-2);color:var(--ink-3);white-space:nowrap;
}
.tag.good,.tag.done{ background:var(--good-soft);color:var(--good); }
.tag.warn,.tag.open{ background:var(--warn-soft);color:var(--warn); }
.tag.bad,.tag.failed{ background:var(--crit-soft);color:var(--crit); }
.tag.brand,.tag.run{ background:var(--green-soft);color:var(--green); }

.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}

:focus-visible{ outline:2px solid var(--green);outline-offset:2px;border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; } }

/* Visually hidden but read by assistive tech. Used to restore the Z in the wordmark,
   which is drawn as an aria-hidden SVG and would otherwise announce as "erak". */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}