/* ==========================================================================
   bytejuggler.com — Design tokens
   Derived from NewSiteLookGfx (logo, banner, wordmark).
   Light = brand default. Dark = "Lab" theme (AI experiments) and user toggle.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var.woff2") format("woff2-variations"),
       url("../fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations"),
       url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-italic.woff2") format("woff2-variations"),
       url("../fonts/inter-var-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2-variations"),
       url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand palette (raw) -------------------------------------------- */
  --bj-ink:          #14171c;  /* wordmark "bytejuggler", logo blocks      */
  --bj-graphite-800: #1f2329;
  --bj-graphite-700: #2a2e33;  /* logo block mid-tone                      */
  --bj-graphite-500: #5e6470;  /* tagline grey                             */
  --bj-graphite-300: #a3a8b1;
  --bj-line:         #e2e4e8;
  --bj-mist:         #f3f4f6;  /* banner background tone                   */
  --bj-paper:        #ffffff;

  --bj-blue-700:     #0047d4;
  --bj-blue-600:     #0057f7;  /* ".com" dark end, cube shadow side        */
  --bj-blue-500:     #0a82fe;  /* ".com" light end                         */
  --bj-cyan-400:     #10b8f8;  /* cube top face                            */
  --bj-blue-100:     #e6f0ff;

  /* AI provenance (from AIBadges/): "Made by AI" = brand blue, "Made with AI" = teal */
  --bj-teal-300:     #2ee6e6;  /* "with AI" light end                     */
  --bj-teal-500:     #00b8c8;
  --bj-teal-700:     #007a88;  /* text-safe teal on white (5.1:1)         */
  --bj-teal-100:     #e3fafa;
  --ai-by-gradient:   linear-gradient(135deg, #10b8f8, #0057f7);
  --ai-with-gradient: linear-gradient(135deg, #2ee6e6, #0098a8);

  --bj-cube-gradient: linear-gradient(135deg, var(--bj-cyan-400) 0%, var(--bj-blue-500) 45%, var(--bj-blue-600) 100%);
  --bj-wordmark-gradient: linear-gradient(90deg, var(--bj-blue-600), var(--bj-blue-500));

  /* Lab palette (shared with the Space Travel explainers) */
  --lab-bg:     #07070d;
  --lab-panel:  #0e1022;
  --lab-line:   #262b4f;
  --lab-text:   #d8dbea;
  --lab-dim:    #9aa0c0;
  --lab-cyan:   #4fd9ff;
  --lab-pink:   #ff8fd2;
  --lab-violet: #a58bff;
  --lab-gold:   #ffcf7a;
  --lab-gradient: linear-gradient(90deg, #ff5fc8, #8a7dff 50%, #4fd9ff);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Major third scale (1.25) on 16px */
  --fs-xs:  0.875rem;  /* 14 */
  --fs-sm:  0.9375rem; /* 15 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.25rem;   /* 20 */
  --fs-xl:  1.5625rem; /* 25 */
  --fs-2xl: 1.9375rem; /* 31 */
  --fs-3xl: 2.4375rem; /* 39 */
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.0625rem); /* 36 → 49 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --tracking-kicker: 0.28em;

  /* ---- Spacing (4px grid) ---------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* ---- Shape, depth, motion -------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;
  --border-w: 1px;

  --shadow-1: 0 1px 2px rgba(20, 23, 28, .06), 0 1px 1px rgba(20, 23, 28, .04);
  --shadow-2: 0 6px 18px -6px rgba(20, 23, 28, .18), 0 2px 4px rgba(20, 23, 28, .06);
  --shadow-3: 0 18px 40px -12px rgba(20, 23, 28, .28);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 46rem;
  --header-h: 4.25rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  color-scheme: light;
}

:root,
[data-theme="light"],
.theme-light {
  /* ---- Semantic (light) ------------------------------------------------
     Also applied by .theme-light to force light colours on a nested element
     (e.g. a white logo tile inside a dark page). */
  --c-bg:          var(--bj-paper);
  --c-bg-alt:      var(--bj-mist);
  --c-surface:     var(--bj-paper);
  --c-text:        var(--bj-ink);
  --c-text-muted:  var(--bj-graphite-500);
  --c-heading:     var(--bj-ink);
  --c-border:      var(--bj-line);
  --c-accent:      var(--bj-blue-600);
  --c-accent-hover:var(--bj-blue-700);
  --c-accent-soft: var(--bj-blue-100);
  --c-on-accent:   #ffffff;
  --c-link:        var(--bj-blue-600);
  --c-code-bg:     #f6f7f9;
  --c-focus:       var(--bj-blue-500);
  --c-slab-dark:   var(--bj-graphite-800);
  --c-slab-mid:    #c9ccd2;
  --c-slab-light:  #eceef1;
  --c-warning:     #b45309;
  --c-warning-bg:  #fff7e6;
  --c-success:     #047857;
  --c-success-bg:  #e7f8f1;
  --c-ai-by:       var(--bj-blue-600);
  --c-ai-by-bg:    var(--bj-blue-100);
  --c-ai-with:     var(--bj-teal-700);
  --c-ai-with-bg:  var(--bj-teal-100);
  --c-tld-gradient:  var(--bj-wordmark-gradient);   /* ".com" in the wordmark */
  --c-mark-gradient: var(--bj-cube-gradient);       /* kicker diamond, accent bar */
  color-scheme: light;
}

/* ---- Dark / Lab theme --------------------------------------------------- */
[data-theme="dark"],
.theme-lab {
  --c-bg:          var(--lab-bg);
  --c-bg-alt:      #0b0c18;
  --c-surface:     var(--lab-panel);
  --c-text:        var(--lab-text);
  --c-text-muted:  var(--lab-dim);
  --c-heading:     #ffffff;
  --c-border:      var(--lab-line);
  --c-accent:      var(--lab-cyan);
  --c-accent-hover:#8be6ff;
  --c-accent-soft: rgba(79, 217, 255, .12);
  --c-on-accent:   #04121a;
  --c-link:        var(--lab-cyan);
  --c-code-bg:     #0a0b18;
  --c-focus:       var(--lab-cyan);
  --c-slab-dark:   #000000;
  --c-slab-mid:    #1a1d38;
  --c-slab-light:  #12142a;
  --c-warning:     var(--lab-gold);
  --c-warning-bg:  rgba(255, 207, 122, .1);
  --c-success:     #6ee7b7;
  --c-success-bg:  rgba(110, 231, 183, .1);
  --c-ai-by:       #5aa9ff;
  --c-ai-by-bg:    rgba(10, 130, 254, .14);
  --c-ai-with:     var(--bj-teal-300);
  --c-ai-with-bg:  rgba(46, 230, 230, .12);
  --c-tld-gradient:  linear-gradient(var(--lab-cyan), var(--lab-cyan));
  --c-mark-gradient: var(--lab-gradient);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-3: 0 20px 48px -12px rgba(0,0,0,.8);
  color-scheme: dark;
}

.theme-light, .theme-lab { color: var(--c-text); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}