/* FlightDeck — base tokens shared with reslozio.com (keep in sync) */

/* ---------- TOKENS: dark (default) ---------- */
:root{
  color-scheme: dark;
  --bg: #050d1c;
  --bg-2: #0b1d3a;
  --text: #eaf6ff;
  --muted: #93a9c4;
  --glass: rgba(255,255,255,0.05);
  --glass-2: rgba(255,255,255,0.10);
  --glass-solid: rgba(8,20,40,0.72);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-2: rgba(255,255,255,0.22);
  --rim-a: rgba(255,255,255,0.55);
  --rim-b: rgba(186,230,253,0.10);
  --rim-c: rgba(186,230,253,0.38);
  --sheen: rgba(255,255,255,0.10);
  --inset-hi: rgba(255,255,255,0.22);
  --glass-shadow: 0 30px 60px -30px rgba(0,6,20,0.85);
  --blur: 18px;
  --line: rgba(255,255,255,0.10);
  --ice: #7dd3fc; --ice-rgb: 125,211,252;
  --ice-2: #bae6fd;
  --peri: #a5b4fc; --peri-rgb: 165,180,252;
  --grad: linear-gradient(115deg, #e0f7ff 0%, #7dd3fc 45%, #a5b4fc 100%);
  --grad-anim: linear-gradient(110deg, #e0f7ff, #7dd3fc, #a5b4fc, #7dd3fc, #e0f7ff);
  --btn-text: #03223d;
  --fd: #ff9ccf; --fd-rgb: 255,156,207;
  --eq: #67e8f9; --eq-rgb: 103,232,249;
  --tr: #86efac; --tr-rgb: 134,239,172;
  --aur-1: #1d4ed8; --aur-2: #0ea5e9; --aur-3: #6366f1;
  --o1: 0.42; --o2: 0.26; --o3: 0.26; --o4: 0.14;
  --dot: rgba(186,230,253,0.09);
  --input-bg: rgba(3,10,24,0.45);
  --stage-bg: linear-gradient(160deg, rgba(30,64,120,0.35), rgba(4,12,28,0.6));
  --node-fill: #0b1a33;
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --radius: 20px;
  --mk1: #e0f7ff; --mk2: #7dd3fc; --mk3: #a5b4fc;
  --accent: var(--ice); --accent-rgb: var(--ice-rgb);
}

/* ---------- TOKENS: light ---------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg: #c3d4e6; --bg-2: #d6e3f0;
    --text: #0a1830; --muted: #34496a;
    --glass: rgba(255,255,255,0.14); --glass-2: rgba(255,255,255,0.32); --glass-solid: rgba(214,228,242,0.72);
    --glass-border: rgba(255,255,255,0.45); --glass-border-2: rgba(20,60,110,0.22);
    --rim-a: rgba(255,255,255,0.7); --rim-b: rgba(255,255,255,0.15); --rim-c: rgba(80,140,200,0.45);
    --sheen: rgba(255,255,255,0.22); --inset-hi: rgba(255,255,255,0.55);
    --glass-shadow: 0 24px 50px -26px rgba(15,40,80,0.45);
    --line: rgba(11,27,51,0.10);
    --ice: #0369a1; --ice-rgb: 3,105,161; --ice-2: #0ea5e9;
    --peri: #4f46e5; --peri-rgb: 79,70,229;
    --grad: linear-gradient(115deg, #0ea5e9 0%, #2563eb 55%, #4f46e5 100%);
    --grad-anim: linear-gradient(110deg, #0369a1, #1d4ed8, #4338ca, #1d4ed8, #0369a1);
    --btn-text: #ffffff;
    --fd: #be185d; --fd-rgb: 190,24,93;
    --eq: #0e7490; --eq-rgb: 14,116,144;
    --tr: #15803d; --tr-rgb: 21,128,61;
    --aur-1: #5b8fd6; --aur-2: #4fb3d9; --aur-3: #8b8fe0;
    --o1: 0.45; --o2: 0.38; --o3: 0.35; --o4: 0.16;
    --dot: rgba(15,40,80,0.10);
    --input-bg: rgba(225,236,247,0.55);
    --stage-bg: linear-gradient(160deg, rgba(214,228,242,0.55), rgba(176,198,222,0.45));
    --node-fill: #dbe6f2;
    --mk1: #0ea5e9; --mk2: #1d4ed8; --mk3: #4f46e5;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #c3d4e6; --bg-2: #d6e3f0;
  --text: #0a1830; --muted: #34496a;
  --glass: rgba(255,255,255,0.14); --glass-2: rgba(255,255,255,0.32); --glass-solid: rgba(214,228,242,0.72);
  --glass-border: rgba(255,255,255,0.45); --glass-border-2: rgba(20,60,110,0.22);
  --rim-a: rgba(255,255,255,0.7); --rim-b: rgba(255,255,255,0.15); --rim-c: rgba(80,140,200,0.45);
  --sheen: rgba(255,255,255,0.22); --inset-hi: rgba(255,255,255,0.55);
  --glass-shadow: 0 24px 50px -26px rgba(15,40,80,0.45);
  --line: rgba(11,27,51,0.10);
  --ice: #0369a1; --ice-rgb: 3,105,161; --ice-2: #0ea5e9;
  --peri: #4f46e5; --peri-rgb: 79,70,229;
  --grad: linear-gradient(115deg, #0ea5e9 0%, #2563eb 55%, #4f46e5 100%);
  --grad-anim: linear-gradient(110deg, #0369a1, #1d4ed8, #4338ca, #1d4ed8, #0369a1);
  --btn-text: #ffffff;
  --fd: #be185d; --fd-rgb: 190,24,93;
  --eq: #0e7490; --eq-rgb: 14,116,144;
  --tr: #15803d; --tr-rgb: 21,128,61;
  --aur-1: #5b8fd6; --aur-2: #4fb3d9; --aur-3: #8b8fe0;
  --o1: 0.45; --o2: 0.38; --o3: 0.35; --o4: 0.16;
  --dot: rgba(15,40,80,0.10);
  --input-bg: rgba(225,236,247,0.55);
  --stage-bg: linear-gradient(160deg, rgba(214,228,242,0.55), rgba(176,198,222,0.45));
  --node-fill: #dbe6f2;
  --mk1: #0ea5e9; --mk2: #1d4ed8; --mk3: #4f46e5;
}

.mk1{ stop-color: var(--mk1); } .mk2{ stop-color: var(--mk2); } .mk3{ stop-color: var(--mk3); } .mk-hole{ fill: var(--bg); }

/* platform colour helpers */
body[data-active="flightdeck"]{ --accent: var(--fd); --accent-rgb: var(--fd-rgb); }
body[data-active="eduqora"]{ --accent: var(--eq); --accent-rgb: var(--eq-rgb); }
body[data-active="tracer"]{ --accent: var(--tr); --accent-rgb: var(--tr-rgb); }
body[data-active="contact"], body[data-active="home"]{ --accent: var(--ice); --accent-rgb: var(--ice-rgb); }
.c-flightdeck{ --c: var(--fd); --c-rgb: var(--fd-rgb); }
.c-eduqora{ --c: var(--eq); --c-rgb: var(--eq-rgb); }
.c-tracer{ --c: var(--tr); --c-rgb: var(--tr-rgb); }
.c-ice{ --c: var(--ice); --c-rgb: var(--ice-rgb); }

/* ---------- BASE ---------- */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body{ overflow-x: hidden; overflow-x: clip; }
body{ background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection{ background: var(--ice); color: var(--btn-text); }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 10px; }
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, fill 0.5s ease, stroke 0.5s ease, box-shadow 0.5s ease !important; }

/* ---------- LIQUID GLASS ---------- */
.lg{
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--sheen), transparent 42%), linear-gradient(145deg, var(--glass-2), var(--glass));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--inset-hi);
}
.lg::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, var(--rim-a), var(--rim-b) 30%, transparent 55%, var(--rim-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (max-width: 760px){ :root{ --blur: 12px; } }