/* ========================================================================
   Starblaze.ai — Design Tokens
   Cosmic cyberpunk: deep-space dark, dual-accent (electric blue + blaze
   orange), glassmorphism, earned glow. No pure black, no pure white.
   ======================================================================== */

/* Webfonts — substituted from Google Fonts pending self-hosted files. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------------------
     COLOR — Foundations
     Two named anchors for depth, a star-white text anchor.
     ---------------------------------------------------------------------- */
  --deep-space:        #0B0E14;   /* base canvas */
  --cosmos-navy:       #0A1B2E;   /* lifted surface */
  --star-white:        #F5F8FF;   /* text — never pure white */

  /* ----------------------------------------------------------------------
     COLOR — Electric Blue ramp (primary signal accent)
     9 stops. Center 500 = brand anchor #4FC3F7.
     ---------------------------------------------------------------------- */
  --blue-50:   #EAF7FE;
  --blue-100:  #CCEBFB;
  --blue-200:  #A6DCF8;
  --blue-300:  #7ECDF7;
  --blue-400:  #62C7F7;
  --blue-500:  #4FC3F7;   /* brand */
  --blue-600:  #2BA6DD;
  --blue-700:  #1C82B0;
  --blue-800:  #135E80;
  --blue-900:  #0B3A52;

  /* ----------------------------------------------------------------------
     COLOR — Blaze Orange ramp (heat / action accent)
     9 stops. Center 500 = brand anchor #FF7A18.
     ---------------------------------------------------------------------- */
  --blaze-50:  #FFF1E2;
  --blaze-100: #FFDDB8;
  --blaze-200: #FFC689;
  --blaze-300: #FFA958;
  --blaze-400: #FF902F;
  --blaze-500: #FF7A18;   /* brand */
  --blaze-600: #DB5F08;
  --blaze-700: #A94706;
  --blaze-800: #7A3204;
  --blaze-900: #4D1F02;

  /* ----------------------------------------------------------------------
     COLOR — Neutral surface ramp (cool-leaning navy greys)
     Used for surfaces, dividers, instrument labels. Never pure black.
     ---------------------------------------------------------------------- */
  --ink-50:    #F5F8FF;   /* = star-white */
  --ink-100:   #D7DEEC;
  --ink-200:   #B0BACB;
  --ink-300:   #95A1B2;   /* muted text */
  --ink-400:   #6B7790;
  --ink-500:   #4B5670;
  --ink-600:   #2F374A;
  --ink-700:   #1C2333;
  --ink-800:   #131826;
  --ink-900:   #0B0E14;   /* = deep-space */

  /* ----------------------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------------------- */
  --bg-canvas:       var(--deep-space);
  --bg-elevated:     var(--cosmos-navy);
  --bg-glass:        rgba(10, 27, 46, 0.55);
  --bg-glass-strong: rgba(10, 27, 46, 0.78);

  --fg-1:            var(--star-white);      /* primary text */
  --fg-2:            var(--ink-200);         /* secondary text */
  --fg-3:            var(--ink-300);         /* tertiary / muted */
  --fg-4:            var(--ink-400);         /* labels, captions */
  --fg-disabled:     var(--ink-500);

  --accent-signal:   var(--blue-500);   /* primary action / focus */
  --accent-heat:     var(--blaze-500);  /* destructive / highlight */
  --accent-on-dark:  var(--star-white);

  --border-subtle:   rgba(245, 248, 255, 0.06);
  --border-default:  rgba(245, 248, 255, 0.12);
  --border-strong:   rgba(79, 195, 247, 0.32);
  --border-heat:     rgba(255, 122, 24, 0.32);

  --success:         #4ADE80;
  --warning:         var(--blaze-400);
  --danger:          #F87171;

  /* ----------------------------------------------------------------------
     SIGNATURE GRADIENTS
     ---------------------------------------------------------------------- */
  --gradient-blaze:
    linear-gradient(135deg, var(--blaze-500) 0%, var(--blue-500) 100%);
  --gradient-blaze-soft:
    linear-gradient(135deg, rgba(255,122,24,0.18) 0%, rgba(79,195,247,0.18) 100%);
  --gradient-nebula:
    radial-gradient(ellipse at 28% 18%, rgba(79,195,247,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 78%, rgba(255,122,24,0.14) 0%, transparent 55%);
  --gradient-hero-vignette:
    radial-gradient(ellipse at center, var(--cosmos-navy) 0%, var(--deep-space) 70%);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Families
     Space Grotesk for display + body. JetBrains Mono for eyebrows +
     instrument labels. No serifs in body.
     ---------------------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* TYPOGRAPHY — Scale (rem, 1rem = 16px) */
  --text-2xs:  0.6875rem;  /* 11 — mono labels */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-md:   1rem;       /* 16 — body */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  4rem;       /* 64 */
  --text-6xl:  5.5rem;     /* 88 — hero */

  /* TYPOGRAPHY — Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* TYPOGRAPHY — Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* TYPOGRAPHY — Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.12em;   /* eyebrows, instrument labels */

  /* ----------------------------------------------------------------------
     SPACING — 4-px base scale
     ---------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */
  --space-10:  8rem;      /* 128 */

  /* ----------------------------------------------------------------------
     RADII
     ---------------------------------------------------------------------- */
  --radius-xs:    2px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* ----------------------------------------------------------------------
     ELEVATION — Depth shadows
     Cool-toned, layered. Used on cards and panels.
     ---------------------------------------------------------------------- */
  --depth-0: none;
  --depth-1: 0 1px 0 0 rgba(245,248,255,0.04) inset,
             0 1px 2px rgba(0,0,0,0.4);
  --depth-2: 0 1px 0 0 rgba(245,248,255,0.05) inset,
             0 4px 12px rgba(0,0,0,0.45);
  --depth-3: 0 1px 0 0 rgba(245,248,255,0.06) inset,
             0 12px 32px rgba(0,0,0,0.55);
  --depth-4: 0 1px 0 0 rgba(245,248,255,0.06) inset,
             0 28px 64px rgba(0,0,0,0.6);

  /* ----------------------------------------------------------------------
     GLOW — Earned, not pervasive. Used on focus, primary actions, hovers.
     ---------------------------------------------------------------------- */
  --glow-signal-sm: 0 0 0 1px rgba(79,195,247,0.45),
                    0 0 12px rgba(79,195,247,0.35);
  --glow-signal-md: 0 0 0 1px rgba(79,195,247,0.55),
                    0 0 24px rgba(79,195,247,0.45),
                    0 0 48px rgba(79,195,247,0.18);
  --glow-heat-sm:   0 0 0 1px rgba(255,122,24,0.45),
                    0 0 12px rgba(255,122,24,0.4);
  --glow-heat-md:   0 0 0 1px rgba(255,122,24,0.5),
                    0 0 24px rgba(255,122,24,0.45),
                    0 0 48px rgba(255,122,24,0.18);
  --glow-mixed:     0 0 24px rgba(79,195,247,0.32),
                    0 0 48px rgba(255,122,24,0.22);

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasize: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-1:    120ms;
  --duration-2:    220ms;
  --duration-3:    360ms;
  --duration-4:    640ms;

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-narrow: 640px;
  --container-base:   960px;
  --container-wide:   1200px;
  --container-full:   1440px;
  --gutter:           clamp(1rem, 4vw, 2.5rem);
}

/* ========================================================================
   SEMANTIC TYPOGRAPHY
   Apply class or element selector to inherit the brand voice.
   ======================================================================== */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

.display-hero,
h1.display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, var(--text-6xl));
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .body {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  max-width: 60ch;
}

.eyebrow,
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow--signal { color: var(--accent-signal); }
.eyebrow--heat   { color: var(--accent-heat); }

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--blue-300);
}

.caption {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-4);
}

a {
  color: var(--blue-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-2) var(--ease-standard),
              border-color var(--duration-2) var(--ease-standard);
}
a:hover {
  color: var(--blue-200);
  border-bottom-color: currentColor;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--glow-signal-sm);
  border-radius: var(--radius-xs);
}

::selection {
  background: rgba(79, 195, 247, 0.35);
  color: var(--star-white);
}