/* ============================================================
   Orbit Design System — Foundations
   Tokens + typography lifted verbatim from @orbit/ui
   (src/tokens/tokens.scss + src/base.scss).
   Load this single file to get the full Orbit visual language.
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Humant";
    src: url("../fonts/Humant-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    /* Structural + syntax palette */
    --darker:        #1b1f23;
    --dark:          #24292e;
    --light:         #f6f8fa;
    --lighter:       #ffffff;
    --blue:          #0366d6;
    --red:           rgb(214, 38, 3);
    --green:         #4caf50;
    --purple:        #8a5cf6;
    --purple-light:  #c4b5fd;
    --accent-light:  #2188ff;
    --favorit:       rgb(255, 149, 62); /* operator highlight orange */
    --border:        #2b3036;
    --text:          #c9d1d9;
    --muted:         #8b949e;
    --lint-darkgreen:#003b35;
    --lint-lightgreen:#0f9;

    /* Brand-mark accents (used as language tints, not UI colors) */
    --brand-svelte: #ff3e00;
    --brand-react:  #61dafb;
    --brand-python: #0035a0;
    --brand-linux:  #fcc624;
    --brand-bash:   #4eaa25;

    /* Workflow-graph node tints */
    --flow-node-blue:  rgba(0, 140, 255, 0.2);
    --flow-node-red:   rgba(255, 72, 0, 0.2);
    --flow-node-green: rgba(0, 255, 98, 0.2);
    --flow-node-white: rgba(255, 255, 255, 0.2);

    /* Foreground ladder — white-on-dark */
    --100: rgba(255, 255, 255, 1);
    --80:  rgba(255, 255, 255, 0.8);
    --60:  rgba(255, 255, 255, 0.6);
    --40:  rgba(255, 255, 255, 0.4);
    --20:  rgba(255, 255, 255, 0.2);
    --10:  rgba(255, 255, 255, 0.1);
    --5:   rgba(255, 255, 255, 0.05);
    --4:   rgba(255, 255, 255, 0.04);
    --2:   rgba(255, 255, 255, 0.02);

    /* Inverse ladder — black-on-light (panels, scene-dim, backdrops) */
    --inv-100: rgba(0, 0, 0, 1);
    --inv-80:  rgba(0, 0, 0, 0.8);
    --inv-60:  rgba(0, 0, 0, 0.6);
    --inv-40:  rgba(0, 0, 0, 0.4);
    --inv-20:  rgba(0, 0, 0, 0.2);
    --inv-10:  rgba(0, 0, 0, 0.1);
    --inv-5:   rgba(0, 0, 0, 0.05);
    --inv-4:   rgba(0, 0, 0, 0.04);
    --inv-2:   rgba(0, 0, 0, 0.02);

    /* Typography */
    --f-sans:   "Lexend", -apple-system, "Segoe UI", sans-serif;
    --f-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --f-humant: "Humant", "Lexend", sans-serif; /* decorative display only */
    --fw-thin:  180;  /* canonical body weight */
    --fw-reg:   300;
    --fw-med:   480;  /* .bold */
    --fw-bold:  600;
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  14px;
    --fs-md:    14px;
    --fs-lg:    16px;
    --fs-xl:    18px;
    --ls-body:  0.16px;

    /* Spacing ladder — 2 → 64 px */
    --sp-0: 2px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 56px;
    --sp-9: 64px;

    /* Radius ladder */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  36px;
    --r-pill: 24px;   /* pill inputs / buttons */
    --r-cap:  999px;  /* capsule / circular status chips */

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-med:  240ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Console / log status (semantic level → color) */
    --lv-debug: var(--40);
    --lv-log:   var(--60);
    --lv-info:  var(--blue);
    --lv-warn:  var(--favorit);
    --lv-error: var(--red);

    /* Glow — focus / hover indicator */
    --glow: 0 0 5px var(--40), 0 0 5px var(--40), 0 0 5px var(--40);

    /* Text-shadow pairs (drop + halo) — readability on busy bg */
    --ts-p:  0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);
    --ts-h1: 0 1px 4px var(--inv-100), 0 0 12px var(--inv-80);
    --ts-h2: 0 1px 3px var(--inv-80),  0 0 10px var(--inv-60);
    --ts-h3: 0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);
    --ts-a:  0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);

    /* Button heights (declared on .button-wrapper, exposed for reuse) */
    --btn-h-lg: 48px;
    --btn-h-sm: 36px;
}

:root[data-theme="light"] {
    --darker:  #ffffff;
    --dark:    #f6f8fa;
    --light:   #24292e;
    --lighter: #1b1f23;
    --border:  #e1e4e8;
    --text:    #24292e;
    --muted:   #6a737d;

    --100: rgba(0, 0, 0, 1);
    --60:  rgba(0, 0, 0, 0.6);
    --40:  rgba(0, 0, 0, 0.4);
    --20:  rgba(0, 0, 0, 0.2);
    --10:  rgba(0, 0, 0, 0.1);
    --5:   rgba(0, 0, 0, 0.05);
    --2:   rgba(0, 0, 0, 0.02);

    --inv-100: rgba(255, 255, 255, 1);
    --inv-80:  rgba(255, 255, 255, 0.8);
    --inv-60:  rgba(255, 255, 255, 0.6);
    --inv-40:  rgba(255, 255, 255, 0.4);
    --inv-20:  rgba(255, 255, 255, 0.2);
    --inv-10:  rgba(255, 255, 255, 0.1);
    --inv-5:   rgba(255, 255, 255, 0.05);
    --inv-2:   rgba(255, 255, 255, 0.02);
}

/* ── Semantic typography ─────────────────────────────────────
   NEVER override font-size / font-weight on individual elements.
   Pair `<h1|h2|h3|p>` + `.bold` / `.italic` / `.mono`.
   ─────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    background: var(--inv-100);
    color: var(--100);
    font-family: var(--f-sans);
}

h1 {
    margin: 0;
    font-family: var(--f-sans);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 180;
    line-height: 1.5;
    letter-spacing: -0.64px;
    text-shadow: var(--ts-h1);
}
h1.bold, h1 span.bold { font-weight: 560; }

h2 {
    margin: 0;
    font-family: var(--f-sans);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 180;
    line-height: 1.75;
    text-shadow: var(--ts-h2);
}
h2.bold, h2 span.bold, h2 strong { font-weight: 600; }

h3 {
    margin: 0;
    font-family: var(--f-sans);
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 180;
    line-height: 2;
    letter-spacing: 0.12px;
    text-shadow: var(--ts-h3);
}
h3.bold, h3 strong { font-weight: 480; }

p, .p {
    margin: 0;
    font-family: var(--f-sans);
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 180;
    line-height: 2.25;
    letter-spacing: var(--ls-body);
    text-shadow: var(--ts-p);
}
p.bold, .p.bold, p strong, .p strong, span.bold, strong { font-weight: 480; }
p.italic, .p.italic, span.italic { font-style: italic; }

a {
    color: var(--80);
    text-shadow: var(--ts-a);
    text-decoration: none;
    transition: color .2s ease-in-out, text-shadow .3s ease-in-out;
}
a:visited { color: var(--40); }
a:hover   { color: var(--100); }

/* ── Micro-typography utilities (base.scss §ui#38) ──────────── */
.micro-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--60);
}
.micro-text {
    font-size: 11px;
    font-weight: 400;
    color: var(--40);
}
.pill-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--60);
}
.hero-stat-lg {
    font-family: var(--f-sans);
    font-size: 36px;
    font-weight: 200;
    line-height: 1;
    color: var(--100);
}
.hero-stat-md {
    font-family: var(--f-sans);
    font-size: 22px;
    font-weight: 200;
    line-height: 1;
    color: var(--100);
}
.body-12 { font-size: 12px; font-weight: 500; }

.mono, span.mono, code.mono, pre.mono {
    font-family: var(--f-mono);
    letter-spacing: 0;
}

/* ── Selection ───────────────────────────────────────────── */
*::selection { background-color: var(--100); color: var(--inv-100); }