/* =========================================================
   HYPEXIO — Future Intelligence Design System
   Futuristic · Dark · Cyan-accented
   hypexio.com / hypexio.de
   ========================================================= */

/* ---------- Webfonts (Google Fonts fallbacks — flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* =================== COLOR SYSTEM =================== */

  /* ---- Base / Background (deep space) ---- */
  --bg-void: #01060E;          /* absolute base, behind everything */
  --bg-deep: #05101C;          /* primary app background */
  --bg-panel: #0A1A2B;         /* cards, side panels */
  --bg-raised: #0F2338;        /* hover / raised surfaces */
  --bg-inset: #030A14;         /* inputs, sunken areas */

  /* ---- Foreground (light on dark) ---- */
  --fg-1: #E8F4FF;             /* primary text */
  --fg-2: #A9C4DE;             /* secondary text */
  --fg-3: #6B869E;             /* tertiary / metadata */
  --fg-4: #3E5670;             /* disabled / hint */
  --fg-inverse: #01060E;       /* text on cyan fills */

  /* ---- Brand primary: Electric Cyan ---- */
  --cyan-50:  #E5FBFF;
  --cyan-100: #B8F2FF;
  --cyan-200: #7FE5FF;
  --cyan-300: #3DD5FF;
  --cyan-400: #00C2FF;         /* ⭐ primary brand */
  --cyan-500: #0099E0;
  --cyan-600: #0077B3;
  --cyan-700: #005583;
  --cyan-800: #00385A;
  --cyan-900: #001E33;

  --brand: var(--cyan-400);
  --brand-glow: 0 0 24px rgba(0, 194, 255, 0.45);
  --brand-glow-soft: 0 0 12px rgba(0, 194, 255, 0.25);

  /* ---- Translucent brand fills (interactive hover/press, soft chips) ---- */
  --bg-cyan-tint:   rgba(0, 194, 255, 0.04);   /* featured-card top gradient stop, lightest tint */
  --bg-cyan-soft:   rgba(0, 194, 255, 0.06);   /* default hover / soft chip background */
  --bg-cyan-glow:   rgba(0, 194, 255, 0.08);   /* inset glow on active segments, tab backgrounds */
  --bg-cyan-press:  rgba(0, 194, 255, 0.12);   /* hover/press state on cyan-bordered controls */
  --bg-cyan-strong: rgba(0, 194, 255, 0.18);   /* loading sweep, active prediction-button accent */
  --bg-cyan-zero:   rgba(0, 194, 255, 0);      /* gradient zero-stop (cyan with alpha 0) */

  /* ---- Translucent --bg-deep variants for sticky/blurred overlays ---- */
  --bg-deep-blur-82: rgba(5, 16, 28, 0.82);    /* default sticky header blur */
  --bg-deep-blur-96: rgba(5, 16, 28, 0.96);    /* mobile drawer blur (more opaque) */

  /* ---- Glow color tokens (rgba color only — pair with custom blur radii) ---- */
  --glow-cyan-mid:   rgba(0, 194, 255, 0.5);   /* SVG drop-shadow on accented strokes */
  --glow-amber-soft: rgba(255, 194, 51, 0.35); /* amber meter / status glow */

  /* ---- Accent: Signal Amber (alerts, highlights, "evaluation" chips) ---- */
  --amber-300: #FFD76A;
  --amber-400: #FFC233;         /* ⭐ accent */
  --amber-500: #E0A21A;
  --bg-amber-soft:  rgba(255, 194, 51, 0.08);
  --bg-amber-press: rgba(255, 194, 51, 0.16);

  /* ---- Semantic ---- */
  --success: #2AE8A0;
  --warning: #FFC233;
  --danger:  #FF4D6A;
  --info:    var(--cyan-400);

  /* ---- Lines / Borders ---- */
  --line-1: rgba(137, 192, 234, 0.08);   /* hairline — grid cells, dividers */
  --line-2: rgba(137, 192, 234, 0.16);   /* card borders */
  --line-3: rgba(137, 192, 234, 0.32);   /* emphasized borders */
  --line-cyan: rgba(0, 194, 255, 0.55);  /* active / focus */

  /* ---- Surface overlays ---- */
  --veil: rgba(1, 6, 14, 0.72);
  --scan: repeating-linear-gradient(
    0deg,
    rgba(0, 194, 255, 0.025) 0px,
    rgba(0, 194, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  --grid: 
    linear-gradient(rgba(0, 194, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 194, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px;

  /* =================== TYPOGRAPHY =================== */

  /* ---- Families ---- */
  --font-display: 'Orbitron', 'Eurostile', 'Bank Gothic', sans-serif;       /* headlines, logo */
  --font-ui: 'Rajdhani', 'Eurostile Ext', 'Barlow Condensed', sans-serif;   /* UI labels, buttons, meta */
  --font-body: 'Space Grotesk', 'Inter', system-ui, sans-serif;             /* article body */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;  /* data, timestamps, code */

  /* ---- Type scale (news + dashboard hybrid) ---- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;

  /* =================== SPACING =================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* =================== RADII =================== */
  --radius-none: 0;
  --radius-sm: 2px;      /* default — brand skews sharp */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;  /* sparingly — chips only */

  /* =================== SHADOWS / GLOWS =================== */
  --shadow-sm: 0 1px 0 rgba(0, 194, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line-2);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--line-2);
  --shadow-inner: inset 0 0 24px rgba(0, 194, 255, 0.06);
  --shadow-focus: 0 0 0 1px var(--cyan-400), 0 0 16px rgba(0, 194, 255, 0.4);
  --shadow-amber: 0 0 0 1px var(--amber-400), 0 0 16px rgba(255, 194, 51, 0.3);

  /* =================== MOTION =================== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  /* =================== BREAKPOINTS (mobile-first) ===================
     Default styles target mobile. Scale up via min-width media queries.
     Use these values inline in @media — CSS custom props can't drive @media. */
  --bp-sm: 480px;   /* large phone */
  --bp-md: 768px;   /* tablet */
  --bp-lg: 1024px;  /* small desktop */
  --bp-xl: 1280px;  /* wide desktop — also max content width for grids */

  /* =================== RESPONSIVE LAYOUT TOKENS =================== */
  --container-max: 1280px;
  --gutter-mobile: var(--sp-4);  /* 16px — mobile side padding */
  --gutter-tablet: var(--sp-6);  /* 32px — tablet side padding */
  --gutter-desktop: var(--sp-7); /* 48px — desktop side padding */

  /* Touch target minimum (Apple HIG / Material) */
  --tap-min: 44px;
}

/* =========================================================
   GLOBAL MOBILE-FIRST DEFAULTS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container helper — mobile-first, scales up */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--gutter-desktop); }
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */

html, body {
  background: var(--bg-deep);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Display / Headlines (Orbitron, uppercase, tight-tracked) ----
   Mobile-first: headlines start smaller, scale up at md (768px) and lg (1024px). */
.display-xl, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-3xl);   /* 44px on mobile */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}
@media (min-width: 768px) {
  .display-xl, h1.display { font-size: var(--text-4xl); line-height: 1.02; } /* 60px */
}
@media (min-width: 1024px) {
  .display-xl, h1.display { font-size: var(--text-5xl); line-height: 1.0; }  /* 84px */
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);   /* 32px on mobile */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}
@media (min-width: 768px) {
  h1, .h1 { font-size: var(--text-3xl); line-height: 1.1; }  /* 44px */
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);    /* 24px on mobile */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}
@media (min-width: 768px) {
  h2, .h2 { font-size: var(--text-2xl); line-height: 1.15; }  /* 32px */
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);    /* 20px on mobile */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
}
@media (min-width: 768px) {
  h3, .h3 { font-size: var(--text-xl); line-height: 1.25; }  /* 24px */
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--text-base);  /* 15px on mobile */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
@media (min-width: 768px) {
  h4, .h4 { font-size: var(--text-md); }  /* 17px */
}

/* ---- Body ---- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-md);    /* 17px on mobile */
  line-height: 1.55;
  color: var(--fg-1);
  font-weight: 400;
}
@media (min-width: 768px) {
  .lead { font-size: var(--text-lg); line-height: 1.5; }  /* 20px */
}

/* ---- UI labels (Rajdhani, uppercase, tracked) ---- */
.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---- Mono / Data ---- */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--cyan-200);
}

.data-lg {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* ---- Links ---- */
a {
  color: var(--cyan-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--cyan-200);
  text-shadow: var(--brand-glow-soft);
}