/* ============================================================================
   TajApps — theme layer
   ----------------------------------------------------------------------------
   ONE file. It re-skins the whole site by redefining the design tokens the pages
   are already built on, plus a short list of structural overrides for the things
   a token cannot reach (radii, section rhythm, nav weight, table chrome).

   REVERSING IT IS ONE EDIT. Every page carries two injected lines in <head>:

       <link rel="stylesheet" href="/theme.css?v=1">
       <script>…sets <html data-theme="…">…</script>

   Delete those two lines (or just set the default to "legacy") and the site is
   byte-for-byte the design it was before. Nothing in the page markup changed to
   support this file, and no rule here is depended on by anything else.

   LIVE SWITCHING, for comparing without a deploy:
       ?theme=enterprise   formal light — the default
       ?theme=midnight     formal dark
       ?theme=legacy       the original black + gold
   The choice sticks in localStorage so it survives navigation.

   HOW IT REACHES EVERYTHING: the site's accent tints used to be 57 hardcoded
   rgba(184,160,106,…) literals, which no theme could touch. They are now
   color-mix(in srgb,var(--gold) N%,transparent) — identical output under the
   legacy palette (verified: max channel delta 4/255), and automatically correct
   under any other.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------------------
   1 · ENTERPRISE — formal light.
   The register most security and compliance buyers are used to: white ground,
   near-navy ink, one deep blue that is spent only on actions and accents
   (the 60-30-10 split), 8pt spacing, 8px radii, shadows you have to look for.
   ---------------------------------------------------------------------------- */
html[data-theme="enterprise"]{
  --bg:#ffffff;
  --bg-2:#f7f9fc;
  --band:#f6f8fb;            --band-line:#e6ebf2;
  --band-1:#f2f6fb;          --band-2:#e9eff7;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --line:#e3e8ef;
  --text:#0d1526;
  --muted:#4c5a70;
  --faint:#76839a;

  /* the one accent. deep enough to read as institutional rather than consumer */
  --gold:#1d4ed8;
  --gold-2:#2563eb;
  --gold-ink:#ffffff;

  --ok:#047857; --bad:#b91c1c; --par:#b45309;

  --maxw:1200px; --readw:740px;
  --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 2px 10px -4px rgba(16,24,40,.10);
  --gglow:0 0 0 1px rgba(29,78,216,.16),0 10px 26px -14px rgba(29,78,216,.40);

  /* surfaces that stay dark on purpose: a terminal that is not dark is not a terminal */
  --term-bg:#0b1220; --term-bar:#111a2e; --term-line:rgba(255,255,255,.08);

  /* Long-form body ink. The article pages wrote this as a literal pale grey, which was right
     on black and unreadable on white — it is a token now, so it follows the theme. */
  --ink-body:#2a3647;
  --alert:#b91c1c;          /* the AUP warning: vivid red is unreadable on white */
  --accent-warm:#b45309;

  --disp:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}

/* ----------------------------------------------------------------------------
   2 · MIDNIGHT — the same discipline, dark.
   For anyone who wants to keep a dark site: navy-black rather than pure black,
   slate neutrals, the same blue. Reads as infrastructure, not luxury.
   ---------------------------------------------------------------------------- */
html[data-theme="midnight"]{
  --bg:#070b14;
  --bg-2:#0a1120;
  --band:#0b1220;            --band-line:rgba(148,163,184,.14);
  --band-1:#0d1526;          --band-2:#111b2e;
  --surface:#0e1626;
  --surface-2:#131e33;
  --line:rgba(148,163,184,.15);
  --text:#e9eefa;
  --muted:#9aa8bd;
  --faint:#6b7a91;

  --gold:#4c8dff;
  --gold-2:#7aaaff;
  --gold-ink:#06101f;

  --ok:#34d399; --bad:#f87171; --par:#fbbf24;

  --maxw:1200px; --readw:740px;
  --radius:8px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 44px -28px rgba(0,0,0,.9);
  --gglow:0 0 0 1px rgba(76,141,255,.22),0 16px 40px -18px rgba(76,141,255,.35);

  --term-bg:#050a13; --term-bar:#0a1120; --term-line:rgba(255,255,255,.07);

  --ink-body:#c6d0e0;
  --alert:#f87171;
  --accent-warm:#fbbf24;

  --disp:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

/* ============================================================================
   3 · STRUCTURE — applies to both new themes, never to legacy.
   Tokens handle colour. These are the things tokens cannot reach: the shape of
   the type, the rhythm of the sections, and the chrome on components.
   ============================================================================ */
html[data-theme="enterprise"] body,
html[data-theme="midnight"] body{
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:0;
}
html[data-theme="enterprise"] h1,html[data-theme="enterprise"] h2,html[data-theme="enterprise"] h3,
html[data-theme="midnight"] h1,html[data-theme="midnight"] h2,html[data-theme="midnight"] h3{
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.16;
}
html[data-theme="enterprise"] .hero h1,
html[data-theme="midnight"] .hero h1{font-weight:800;letter-spacing:-.035em}
html[data-theme="enterprise"] .lede,
html[data-theme="midnight"] .lede{font-weight:400}

/* the eyebrow stops shouting: enterprise sites label, they do not announce */
html[data-theme="enterprise"] .eyebrow,html[data-theme="midnight"] .eyebrow{
  font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.09em}

/* 8pt rhythm. The old site ran on 100px section padding and 14px radii; this is
   tighter and more regular, which is most of what makes a page read as "formal". */
html[data-theme="enterprise"] section,html[data-theme="midnight"] section{padding:88px 0}
html[data-theme="enterprise"] .sec-head,html[data-theme="midnight"] .sec-head{margin-bottom:40px;max-width:720px}
html[data-theme="enterprise"] .sec-head h2,html[data-theme="midnight"] .sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 14px}
html[data-theme="enterprise"] .sec-head p,html[data-theme="midnight"] .sec-head p{font-size:17px;font-weight:400}
@media(max-width:560px){
  html[data-theme="enterprise"] section,html[data-theme="midnight"] section{padding:64px 0}
}

/* buttons: squarer, denser, and the primary one is the only filled thing on screen */
html[data-theme="enterprise"] .btn,html[data-theme="midnight"] .btn{
  border-radius:6px;font-weight:600;font-size:14.5px;padding:11px 18px;letter-spacing:-.005em}
html[data-theme="enterprise"] .btn-primary,html[data-theme="midnight"] .btn-primary{
  box-shadow:0 1px 2px rgba(16,24,40,.08)}
html[data-theme="enterprise"] .btn-primary:hover,html[data-theme="midnight"] .btn-primary:hover{
  background:var(--gold-2);transform:none}
html[data-theme="enterprise"] .btn-ghost,html[data-theme="midnight"] .btn-ghost{
  border-color:var(--line);background:var(--surface)}

/* cards: a hairline and a whisper of shadow, no lift on hover */
html[data-theme="enterprise"] .card,html[data-theme="enterprise"] .ucard,
html[data-theme="enterprise"] .path,html[data-theme="enterprise"] .seal,
html[data-theme="midnight"] .card,html[data-theme="midnight"] .ucard,
html[data-theme="midnight"] .path,html[data-theme="midnight"] .seal{border-radius:10px}
html[data-theme="enterprise"] .card:hover,html[data-theme="enterprise"] .ucard:hover,
html[data-theme="enterprise"] .path:hover{transform:none;border-color:var(--gold);box-shadow:var(--shadow)}
html[data-theme="midnight"] .card:hover,html[data-theme="midnight"] .ucard:hover,
html[data-theme="midnight"] .path:hover{transform:none;border-color:var(--gold)}

/* chips and tags read as metadata, not decoration */
html[data-theme="enterprise"] .chip,html[data-theme="midnight"] .chip{
  border-radius:6px;font-size:12.5px;padding:7px 12px;background:var(--surface-2)}
html[data-theme="enterprise"] .chip::before,html[data-theme="midnight"] .chip::before{display:none}

/* tables: the single most "enterprise" component on the site. Rules, not glow. */
html[data-theme="enterprise"] .table-wrap,html[data-theme="midnight"] .table-wrap{border-radius:10px}
html[data-theme="enterprise"] table,html[data-theme="midnight"] table{font-size:14.5px}
html[data-theme="enterprise"] th,html[data-theme="midnight"] th{
  font-family:var(--body);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:13px}
html[data-theme="enterprise"] thead th{background:var(--surface-2);color:var(--text)}
html[data-theme="enterprise"] tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}

/* the ambient gold fog belongs to the old theme; on a formal ground it is noise */
html[data-theme="enterprise"] .glow{opacity:.35;animation:none}
html[data-theme="midnight"] .glow{opacity:.5}

/* the nav: shorter, denser, with a real rule under it */
html[data-theme="enterprise"] header.nav,html[data-theme="midnight"] header.nav{
  border-bottom:1px solid var(--line)}
html[data-theme="enterprise"] .nav-in,html[data-theme="midnight"] .nav-in{height:62px}
html[data-theme="enterprise"] .nav-links a,html[data-theme="midnight"] .nav-links a{
  font-size:14.5px;font-weight:500}
html[data-theme="enterprise"] .ddmenu,html[data-theme="midnight"] .ddmenu{border-radius:10px}

/* screenshots and video need a frame once the page behind them is pale */
html[data-theme="enterprise"] img,html[data-theme="enterprise"] video{
  border-radius:8px}
html[data-theme="enterprise"] .shot img,html[data-theme="enterprise"] .console-shot img{
  border:1px solid var(--line)}

/* footer */
html[data-theme="enterprise"] .ft,html[data-theme="midnight"] .ft{
  background:var(--band);border-top:1px solid var(--line)}

/* the theme switcher itself */
.taj-theme-sw{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;gap:2px;
  background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef);border-radius:999px;
  padding:3px;box-shadow:0 4px 18px -6px rgba(16,24,40,.28);font-family:var(--body,system-ui);
  opacity:.72;transition:opacity .15s ease}
.taj-theme-sw:hover,.taj-theme-sw:focus-within{opacity:1}
.taj-theme-sw button{appearance:none;border:0;background:none;cursor:pointer;border-radius:999px;
  padding:6px 13px;font-size:12px;font-weight:600;color:var(--muted,#4c5a70);letter-spacing:.01em}
.taj-theme-sw button:hover{color:var(--text,#0d1526)}
.taj-theme-sw button[aria-pressed="true"]{background:var(--gold,#1d4ed8);color:var(--gold-ink,#fff)}
@media print{.taj-theme-sw{display:none}}

/* ----------------------------------------------------------------------------
   4 · Article pages. They carry their own stylesheet (blog/style.css) written for
   a black ground, so a few surfaces need saying explicitly once the ground is pale.
   ---------------------------------------------------------------------------- */
html[data-theme="enterprise"] .prose p,
html[data-theme="enterprise"] .prose ul,
html[data-theme="enterprise"] .prose ol,
html[data-theme="enterprise"] .prose li{color:var(--ink-body)}
html[data-theme="enterprise"] .prose strong,
html[data-theme="enterprise"] .prose b{color:var(--text)}
html[data-theme="enterprise"] .ctrl li,
html[data-theme="enterprise"] .steps li{color:var(--ink-body)}
html[data-theme="enterprise"] .callout,
html[data-theme="midnight"] .callout{border-radius:10px;background:var(--surface-2)}
html[data-theme="enterprise"] .cta-box,html[data-theme="midnight"] .cta-box{border-radius:12px}
html[data-theme="enterprise"] .tier,html[data-theme="midnight"] .tier{border-radius:10px}
html[data-theme="enterprise"] .gcard,html[data-theme="midnight"] .gcard{border-radius:10px}
html[data-theme="enterprise"] details,html[data-theme="midnight"] details{border-radius:8px}

/* the compliance band: a tinted ground reads as a section marker on white, but the radial
   accent wash behind it was sized for a dark page and turns into a bruise on a pale one */
html[data-theme="enterprise"] #compliance{
  background:linear-gradient(180deg,var(--band-1),var(--band-2) 60%,var(--band-1));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-theme="enterprise"] section.band{border-color:var(--band-line)}

/* mono labels sit a touch dark on white at the old weight */
html[data-theme="enterprise"] .mono,html[data-theme="enterprise"] .cnote{color:var(--muted)}

/* ----------------------------------------------------------------------------
   5 · Analytics (/analytics/admin.php). It is a separate PHP document with its own
   stylesheet; its token NAMES now match the rest of the site, so the palette above
   reaches it. These are the handful of surfaces it still states as literals, which
   were tuned against black.
   ---------------------------------------------------------------------------- */
html[data-theme="enterprise"] .card,
html[data-theme="enterprise"] .panel,
html[data-theme="enterprise"] .note,
html[data-theme="enterprise"] .vis{box-shadow:var(--shadow);border-radius:10px}
html[data-theme="enterprise"] .chip.bad{
  color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);
  background:color-mix(in srgb,var(--bad) 8%,transparent)}
html[data-theme="enterprise"] .chip.good{
  color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
html[data-theme="enterprise"] .flags{
  border-left:2px solid var(--par);background:color-mix(in srgb,var(--par) 8%,transparent)}
html[data-theme="enterprise"] .flags b{color:var(--par)}
html[data-theme="enterprise"] .bt{background:var(--surface-2)}
html[data-theme="enterprise"] .dot{box-shadow:none}
html[data-theme="enterprise"] .kv{background:var(--line)}
html[data-theme="enterprise"] .detail>td{background:var(--surface-2)}

/* the same, for the dark theme — its values differ from the original gold build */
html[data-theme="midnight"] .chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent)}
html[data-theme="midnight"] .chip.good{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
html[data-theme="midnight"] .flags{border-left:2px solid var(--par);background:color-mix(in srgb,var(--par) 10%,transparent)}
html[data-theme="midnight"] .flags b{color:var(--par)}