/* ============================================================
   Kyro Scholar — KyroIT brand tokens and shell
   Shared by the landing page (/) and the workbench (/app).
   Brand values come from the KyroIT logo usage sheet; do not
   improvise on the signature ramp.
   ============================================================ */

:root{
  --sig-cyan:#7BE9F0; --sig-blue:#38BDF8; --sig-indigo:#6366F1;
  --ink-cyan:#0EA5C6; --ink-blue:#2E6BE6; --ink-indigo:#4F46E5;
  --brand-ink:#0B1A2C;

  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  /* Motion: strong ease-out for anything entering or responding, in-out for on-screen moves. */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --wrap:1240px;

  /* Light surfaces (default). */
  --bg:#F2F6F9; --bg-2:#E9EFF4;
  --surface:#FFFFFF; --surface-2:#F7FAFC; --surface-3:#EAF1F6;
  --border:#DCE6EC; --border-mid:#C7D6E0; --border-strong:#A9BDCC;
  --text:#0B1A2C; --text-2:#46596B; --text-3:#7C8FA0;
  --aqua:#2E6BE6; --aqua-deep:#0EA5C6; --indigo:#4F46E5;
  --aqua-soft:rgba(46,107,230,.10);
  --ok:#15803D; --ok-bg:#E4F5EA; --warn:#9A5B00; --warn-bg:#FDF3D7; --bad:#B42334; --bad-bg:#FDEAEA;
  --gold:#8A6100; --gold-bg:#FDF3D7;
  --shadow-1:0 1px 2px rgba(11,26,44,.06);
  --shadow-2:0 12px 32px -14px rgba(11,26,44,.20);
  --shadow-3:0 32px 70px -28px rgba(11,26,44,.26);
  --mesh-a:rgba(46,107,230,.10); --mesh-b:rgba(14,165,198,.09); --mesh-c:rgba(79,70,229,.08);
  --grid-line:rgba(11,26,44,.05);
  --on-accent:#04121F;
  --grad:linear-gradient(96deg,var(--sig-cyan),var(--sig-blue) 45%,var(--sig-indigo));
  --grad-text:linear-gradient(96deg,#0EA5C6 0%,#2E6BE6 45%,#4F46E5 100%);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#050A12; --bg-2:#071120;
  --surface:#0E2038; --surface-2:#132A47; --surface-3:#1B3557;
  --border:rgba(123,233,240,.12); --border-mid:rgba(123,233,240,.20); --border-strong:rgba(123,233,240,.32);
  --text:#EAF3FA; --text-2:#A9BED0; --text-3:#7C8FA0;
  --aqua:#38BDF8; --aqua-deep:#0EA5C6; --indigo:#6366F1;
  --aqua-soft:rgba(56,189,248,.14);
  --ok:#34D399; --ok-bg:rgba(52,211,153,.14); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.14);
  --bad:#FB7185; --bad-bg:rgba(251,113,133,.14);
  --gold:#F0C761; --gold-bg:rgba(240,199,97,.14);
  --shadow-1:0 1px 2px rgba(2,8,18,.5);
  --shadow-2:0 10px 30px -12px rgba(2,8,18,.75);
  --shadow-3:0 30px 70px -24px rgba(2,8,18,.9);
  --mesh-a:rgba(56,189,248,.20); --mesh-b:rgba(123,233,240,.14); --mesh-c:rgba(99,102,241,.16);
  --grid-line:rgba(123,233,240,.08);
  --grad-text:linear-gradient(96deg,var(--sig-cyan) 0%,var(--sig-blue) 45%,var(--sig-indigo) 100%);
  color-scheme:dark;
}
/* System preference applies only while the visitor has not chosen a theme. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#050A12; --bg-2:#071120;
    --surface:#0E2038; --surface-2:#132A47; --surface-3:#1B3557;
    --border:rgba(123,233,240,.12); --border-mid:rgba(123,233,240,.20); --border-strong:rgba(123,233,240,.32);
    --text:#EAF3FA; --text-2:#A9BED0; --text-3:#7C8FA0;
    --aqua:#38BDF8; --aqua-deep:#0EA5C6; --indigo:#6366F1;
    --aqua-soft:rgba(56,189,248,.14);
    --ok:#34D399; --ok-bg:rgba(52,211,153,.14); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.14);
    --bad:#FB7185; --bad-bg:rgba(251,113,133,.14);
    --gold:#F0C761; --gold-bg:rgba(240,199,97,.14);
    --shadow-1:0 1px 2px rgba(2,8,18,.5);
    --shadow-2:0 10px 30px -12px rgba(2,8,18,.75);
    --shadow-3:0 30px 70px -24px rgba(2,8,18,.9);
    --mesh-a:rgba(56,189,248,.20); --mesh-b:rgba(123,233,240,.14); --mesh-c:rgba(99,102,241,.16);
    --grid-line:rgba(123,233,240,.08);
    --grad-text:linear-gradient(96deg,var(--sig-cyan) 0%,var(--sig-blue) 45%,var(--sig-indigo) 100%);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .icon-btn .sun{display:block}
  :root:not([data-theme="light"]) .icon-btn .moon{display:none}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--aqua);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Brand lockup ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.028em;flex:none;
  font-variation-settings:'opsz' 20,'wdth' 90}
.brand-mark{width:32px;height:32px;flex:none;transition:filter .25s}
.brand:hover .brand-mark{filter:drop-shadow(0 0 10px rgba(56,189,248,.45))}
.brand-word{display:inline-block;letter-spacing:.18em;text-transform:uppercase;font-weight:700;font-size:15px}
.brand-word em{font-style:normal}
.brand-sep{width:1px;height:22px;background:var(--border-strong);margin:0 2px}
.brand-product{font-size:17px;font-weight:700;letter-spacing:-.02em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--font-display);font-weight:650;font-size:15px;letter-spacing:-.005em;
  font-variation-settings:'opsz' 18,'wdth' 98;cursor:pointer;white-space:nowrap;text-decoration:none;color:inherit;
  transition:transform .16s var(--ease-out),box-shadow .18s var(--ease-out),background .18s,border-color .18s,color .18s}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--grad);background-size:180% auto;color:var(--on-accent);
  box-shadow:0 8px 22px -12px rgba(56,189,248,.5)}
.btn-primary:hover{background-position:100% 50%;box-shadow:0 14px 32px -14px rgba(56,189,248,.6)}
.btn-ghost{background:var(--surface);border-color:var(--border-mid);color:var(--text)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-line{background:transparent;border-color:var(--border-mid);color:var(--text)}
.btn-line:hover{border-color:var(--aqua);color:var(--aqua)}
.btn-sm{padding:8px 16px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:16px}

/* ---------- Type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);
  padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--surface);
  box-shadow:var(--shadow-1)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 0 3px var(--aqua-soft)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--font-mono)}

/* ---------- Pills used in both pages ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);
  color:var(--aqua);background:var(--aqua-soft);border:1px solid var(--border-mid);white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.gold{color:var(--gold);background:var(--gold-bg)}
.pill.muted{color:var(--text-3);background:var(--surface-2)}

/* ---------- Icon button (theme toggle) ---------- */
.icon-btn{width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--border-mid);
  background:var(--surface);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:border-color .18s,color .18s}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{border-color:var(--aqua);color:var(--aqua)}}
.icon-btn{transition:border-color .18s,color .18s,transform .16s var(--ease-out)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .sun{display:none}
:root[data-theme="dark"] .icon-btn .sun{display:block}
:root[data-theme="dark"] .icon-btn .moon{display:none}
:root[data-theme="light"] .icon-btn .sun{display:none!important}
:root[data-theme="light"] .icon-btn .moon{display:block!important}