/* Sears Tower — Tension Type, free for commercial use.
    https://fonts.google.com/specimen/Jost/license */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Sears Tower — Tension Type, free for commercial use.
   https://www.fontsquirrel.com/license/sears-tower */
@font-face {
  font-family: "Sears Tower";
  src: url("../fonts/Sears_Tower-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {

  /* ---- Core brand colors ------------------------------------------------ */

  --ah-green:        #00DA38;   /* rgb(0,218,56)   — neon spray-paint green */
  --ah-green-ink:    #00B02D;   /* pressed / hover */
  --ah-green-glow:   #7BFFA0;   /* tint / soft wash */

  --ah-magenta:      #F600C3;   /* rgb(246,0,195)  — hot marker magenta     */
  --ah-magenta-ink:  #C8009E;
  --ah-magenta-glow: #FF8CE2;

  /* ---- Neutrals --------------------------------------------------------- */

  --ah-paper:        #FFFFFF;   /* primary paper — bright, near-pure white  */
  --ah-paper-warm:   #E8ECF0;   /* inset surfaces — cool neutral gray        */
  --ah-ink:          #0E0A14;   /* primary foreground                       */
  --ah-ink-soft:     #3A2F46;   /* secondary foreground                     */
  --ah-ink-mute:     #6B5E77;   /* tertiary, captions                       */
  --ah-rule:         #0E0A14;   /* hairline strokes on paper                */
  --ah-rule-soft:    rgba(14,10,20,0.15);

  --ah-console:      #0A0A0D;   /* terminal / dark mode base                */
  --ah-console-2:    #14141B;   /* dark mode panel                          */
  --ah-console-3:    #1E1E28;   /* dark mode elevated                       */
  --ah-console-line: #2A2A36;   /* dark mode hairline                       */

  /* ---- Accent thread ---------------------------------------------------- */

  --ah-deepblue:     #2D00F7;   /* electric ink-blue — poster / risograph     */
  --ah-deepblue-ink: #1A008C;   /* pressed / hover                             */
  --ah-deepblue-tint:#3D19FF;   /* hover surface                               */

  --ah-deeppurple:   #6200EA;   /* blacklight purple — rave / ultraviolet      */
  --ah-deeppurple-ink:#3D00A0;
  --ah-deeppurple-tint:#7A2AFF;

  --ah-red:          #FF0040;   /* hot red — stop sign / emergency             */
  --ah-red-ink:      #C8002E;
  --ah-red-tint:     #FF3366;

  /* Vibrant accent roster —--------------------------------------------------*/

  --ah-acid-yellow:  #F7FF00;   /* hazard · tape · highlighter                */
  --ah-cyan-spark:   #00E5FF;   /* link in dark mode · cold tech              */
  --ah-electric-blue:var(--ah-deepblue);  /* alias                          */
  --ah-tangerine:    #FF6B00;   /* spray can orange                            */
  --ah-hot-red:      var(--ah-red);       /* alias                          */
  --ah-ultraviolet:  var(--ah-deeppurple);/* alias                          */
  --ah-lime-chart:   #CCFF00;   /* chartreuse · brighter than safe             */

  /* ---- Semantic (light mode) -------------------------------------------- */

  --bg:              var(--ah-paper);
  --bg-inset:        var(--ah-paper-warm);
  --fg1:             var(--ah-ink);
  --fg2:             var(--ah-ink-soft);
  --fg3:             var(--ah-ink-mute);
  --rule:            var(--ah-rule);
  --rule-soft:       var(--ah-rule-soft);

  --accent:          var(--ah-green);
  --accent-ink:      var(--ah-green-ink);
  --accent-alt:      var(--ah-magenta);
  --accent-alt-ink:  var(--ah-magenta-ink);

  --link:            var(--ah-magenta);
  --link-visited:    var(--ah-magenta-ink);
  --selection-bg:    var(--ah-green);
  --selection-fg:    var(--ah-ink);

  --success:         var(--ah-green-ink);
  --danger:          var(--ah-red);
  --danger-ink:      var(--ah-red-ink);
  --warn:            #F7B500;
  --info:            var(--ah-deepblue);
  --focus:           var(--ah-deeppurple);

  /* ---- Type tokens ------------------------------------------------------ */

  --font-display:    "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:       "Sears Tower", "Courier New", Courier, Georgia, serif;
  --font-mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif:      "Sears Tower", "Courier New", Courier, Georgia, serif;

  /* Modular scale — 1.25 minor third, anchored at 16px */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  128px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-shout:   0.12em;  /* eyebrow caps */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* ---- Radii — mostly square. Radii are small and intentional. */
  --r-0:   0px;
  --r-1:   2px;    /* pill tags, inputs                                    */
  --r-2:   6px;    /* cards                                                */
  --r-3:   12px;   /* modals                                               */
  --r-pill: 999px; /* used sparingly for tags, never buttons               */

  /* ---- Borders — hairline, thick, and "spec" ----------------------------
     "Spec" borders are the technical-drawing look
     grid sheet — magenta dashed 1px. ------------------------------------ */
  --bw-hair:  1px;
  --bw-bold:  2px;
  --bw-shout: 4px;
  --border-hair:  var(--bw-hair)  solid var(--ah-ink);
  --border-bold:  var(--bw-bold)  solid var(--ah-ink);
  --border-shout: var(--bw-shout) solid var(--ah-ink);
  --border-spec:  1px dashed var(--ah-magenta);

  /* ---- Shadows — 
     1) "Riso" = hard color offset (no blur)
     2) "Stamp" = hard black offset (no blur) — street-poster look
     3) "Console" = glowing LED feel for dark mode ---------------------- */
  --sh-riso-green:   4px 4px 0 0 var(--ah-green);
  --sh-riso-magenta: 4px 4px 0 0 var(--ah-magenta);
  --sh-stamp-sm:     2px 2px 0 0 var(--ah-ink);
  --sh-stamp:        4px 4px 0 0 var(--ah-ink);
  --sh-stamp-lg:     8px 8px 0 0 var(--ah-ink);
  --sh-glow-green:   0 0 0 1px var(--ah-green), 0 0 24px 0 rgba(0,218,56,0.55);
  --sh-glow-magenta: 0 0 0 1px var(--ah-magenta), 0 0 24px 0 rgba(246,0,195,0.55);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast:   80ms;
  --dur-base:   140ms;
  --dur-slow:   240ms;
  --ease-crisp: cubic-bezier(.2,0,.1,1);
  --ease-step:  steps(3, end);   /* for glitchy/ticker-style motion         */

  /* ---- Z index ---------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   10000;

  /* ---- Container / layout ---------------------------------------------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
}

/* Dark / Console mode — ------------------------------------------------- */
[data-theme="console"] {
  --bg:          var(--ah-console);
  --bg-inset:    var(--ah-console-2);
  --fg1:         #F0F0F5;
  --fg2:         #B8B8C8;
  --fg3:         #7A7A8A;
  --rule:        var(--ah-console-line);
  --rule-soft:   rgba(255,255,255,0.08);
  --link:        var(--ah-cyan-spark);
}

/* ==========================================================================
   Semantic element styles — use these directly on tags, or via classes
   like .h1 / .h2 / .eyebrow / .body / .code.
   ========================================================================== */

html {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-md); }
.body-sm { font-size: var(--fs-sm); color: var(--fg2); }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-shout);
  text-transform: uppercase;
  color: var(--fg2);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 8px;
  border: var(--border-hair);
  background: var(--ah-paper);
  color: var(--fg1);
}
.tag--live    { background: var(--ah-green);    border-color: var(--ah-ink); }
.tag--hack    { background: var(--ah-magenta);  color: #fff; border-color: var(--ah-ink); }
.tag--physical{ background: var(--ah-bubblegum); border-color: var(--ah-ink); }

code, kbd, samp, pre, .code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  padding: 1px 6px;
  background: var(--bg-inset);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-1);
}
pre {
  padding: var(--s-4);
  background: var(--ah-console);
  color: #F0F0F5;
  border: var(--border-bold);
  overflow-x: auto;
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-crisp),
              background var(--dur-fast) var(--ease-crisp);
}
a:hover { background: var(--ah-green); color: var(--ah-ink); text-decoration-color: var(--ah-ink); }

hr {
  border: 0;
  border-top: var(--border-hair);
  margin: var(--s-6) 0;
}

/* ==========================================================================
   Utility classes the UI kits & previews use.
   ========================================================================== */

.ah-paper        { background: var(--ah-paper);     color: var(--ah-ink); }
.ah-paper-warm   { background: var(--ah-paper-warm);color: var(--ah-ink); }
.ah-console      { background: var(--ah-console);   color: #F0F0F5; }
.ah-bubblegum    { background: var(--ah-bubblegum); color: var(--ah-ink); }
.ah-green-bg     { background: var(--ah-green);     color: var(--ah-ink); }
.ah-magenta-bg   { background: var(--ah-magenta);   color: #FFF; }

/* "Spec sheet" grid overlay — matches the logo's construction grid.
   Apply to any container to get the magenta-dashed drafting grid.        */
.ah-spec-grid {
  background-image:
    linear-gradient(to right,  rgba(246,0,195,.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(246,0,195,.25) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* "Riso" duotone offset — wrap text to get the chromatic-aberration look.
   Use SPARINGLY — it's loud on purpose.                                  */
.ah-riso {
  position: relative;
  color: var(--ah-ink);
}
.ah-riso::before,
.ah-riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ah-riso::before { color: var(--ah-green);   transform: translate(-3px, -2px); }
.ah-riso::after  { color: var(--ah-magenta); transform: translate( 3px,  2px); }