/* ============================================================
   TECH AI MAGAZINE — DESIGN TOKENS (flattened from design system)
   Source: tech-ai-magazine-design-system-ca2698db
   Fonts self-hosted; Google Fonts <link> added in header for staging.
   ============================================================ */

/* Brand display face: Orbitron (SIL Open Font License 1.1 — free for
   commercial use; see fonts/Orbitron-OFL.txt). Self-hosted variable font;
   the 400-900 weight axis covers every display weight the design uses.
   Replaced Raider Crusader, which was non-commercial-only. */
@font-face{font-family:'Orbitron';src:url('../fonts/Orbitron.ttf') format('truetype-variations');font-weight:400 900;font-style:normal;font-display:swap;}

/* ============================================================
   TECH AI MAGAZINE — COLOR TOKENS
   Dark-first, futuristic. Electric cyan on deep cool ink.
   ============================================================ */

:root {
  /* ---- Brand: Electric Cyan (the logo dot) ---- */
  --cyan-300: #7AE7FF;
  --cyan-400: #3DDBFF;
  --cyan-500: #00CDFF;   /* PRIMARY brand cyan — sampled from logo */
  --cyan-600: #00B0F0;   /* deeper cyan (media-kit accent) */
  --cyan-700: #0090C8;
  --cyan-800: #006B95;

  /* ---- Ink: cool blue-tinted neutral scale ---- */
  --white:    #FFFFFF;
  --ink-50:   #EEF3F8;
  --ink-100:  #D6DEE8;
  --ink-200:  #B0BCCB;
  --ink-300:  #8794A6;
  --ink-400:  #5E6B7E;
  --ink-500:  #404D5E;
  --ink-600:  #2A3543;
  --ink-700:  #1B2430;
  --ink-800:  #131A24;
  --ink-850:  #0E141C;
  --ink-900:  #0A0E14;
  --ink-950:  #05070A;   /* near-black page base */
  --black:    #000000;   /* true logo black */

  /* ---- Secondary accents (sourced from brand imagery) ---- */
  --magenta-500: #FF3D8B;   /* cyberpunk neon — sparingly */
  --violet-500:  #8B5CF6;   /* plexus violet */

  /* ---- Semantic status ---- */
  --success-500: #2FD27A;
  --warning-500: #FF9F1C;
  --danger-500:  #FF4D4D;

  /* ---- Signature glow (cyan, for shadows/auras) ---- */
  --cyan-rgb: 0, 205, 255; /* @kind color */

  /* ========== SEMANTIC ALIASES — DARK (default surface) ========== */
  --bg-base:        var(--ink-950);
  --bg-raised:      var(--ink-900);
  --surface:        var(--ink-850);
  --surface-2:      var(--ink-800);
  --surface-hover:  var(--ink-700);

  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-cyan:    rgba(var(--cyan-rgb), 0.45);

  --text-strong:    var(--white);
  --text-body:      var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-faint:     var(--ink-400);

  --accent:         var(--cyan-500);
  --accent-hover:   var(--cyan-400);
  --accent-press:   var(--cyan-600);
  --on-accent:      var(--black);   /* black text on cyan */
}

/* ========== LIGHT SCOPE — for print/editorial surfaces ========== */
.theme-light {
  --bg-base:        var(--white);
  --bg-raised:      var(--ink-50);
  --surface:        var(--white);
  --surface-2:      var(--ink-50);
  --surface-hover:  var(--ink-100);

  --border:         rgba(10, 14, 20, 0.12);
  --border-strong:  rgba(10, 14, 20, 0.22);
  --border-cyan:    rgba(var(--cyan-rgb), 0.55);

  --text-strong:    var(--ink-950);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);

  --accent:         var(--cyan-600);
  --accent-hover:   var(--cyan-500);
  --accent-press:   var(--cyan-700);
  --on-accent:      var(--black);
}
/* ============================================================
   TECH AI MAGAZINE — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Orbitron', 'Archivo Expanded', sans-serif;      /* futuristic display — stat/rank numerals, wordmark */
  --font-expanded: 'Archivo Expanded', 'Archivo', sans-serif;      /* wide headings */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif; /* headings + body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;       /* eyebrows, data, code */

  /* ---- Fluid type scale (clamped, 1.25 ratio core) ---- */
  --text-2xs:  0.6875rem;  /* 11px — micro labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */
  --text-5xl:  5.5rem;     /* 88px */

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:    1.02;   /* @kind font */
  --lh-snug:     1.15;   /* @kind font */
  --lh-normal:   1.5;    /* @kind font */
  --lh-relaxed:  1.7;    /* @kind font */

  /* ---- Tracking ---- */
  --ls-tighter: -0.03em; /* @kind font */
  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-wider:   0.12em;   /* @kind font */
  --ls-widest:  0.22em; /* @kind font */
}
/* ============================================================
   TECH AI MAGAZINE — SPACING & LAYOUT TOKENS
   8px base grid.
   ============================================================ */

:root {
  --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:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Container widths ---- */
  --container-sm:  640px;
  --container-md:  920px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  /* ---- Z-index scale ---- */
  --z-base:     1; /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-overlay:  500; /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-toast:    1500; /* @kind other */
}
/* ============================================================
   TECH AI MAGAZINE — EFFECTS: RADII, BORDERS, SHADOWS, MOTION
   Sharp, technical, with a signature cyan glow.
   ============================================================ */

:root {
  /* ---- Corner radii — tight & technical, never pill-soft on cards ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;   /* tags, status chips */
  --radius-full: 50%;

  /* ---- Elevation: cool, deep shadows for dark surfaces ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.60);

  /* ---- Signature cyan glow (focus, active, hero accents) ---- */
  --glow-sm:  0 0 0 1px rgba(var(--cyan-rgb), 0.40), 0 0 12px rgba(var(--cyan-rgb), 0.25);
  --glow-md:  0 0 24px rgba(var(--cyan-rgb), 0.35);
  --glow-lg:  0 0 48px rgba(var(--cyan-rgb), 0.45);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--cyan-500); /* @kind shadow */

  /* ---- Hairline gradients & textures ---- */
  --edge-cyan: linear-gradient(90deg, transparent, var(--cyan-500), transparent); /* @kind other */
  --grid-line: rgba(255, 255, 255, 0.04); /* @kind color */

  /* ---- Motion: fast, precise, slight ease ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Backdrop blur ---- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 16px; /* @kind other */
}
/* ============================================================
   TECH AI MAGAZINE — BASE / RESET / PRIMITIVES
   Dark-first defaults. Sets the stage for every surface.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

::selection { background: var(--cyan-500); color: var(--black); }

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

/* ============================================================
   PRIMITIVE UTILITY CLASSES (used across cards/components)
   ============================================================ */

/* Mono kicker / eyebrow — the brand's signature label style */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-500, 500);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

/* Wide expanded display heading */
.ds-display {
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* Cyan top-rule accent */
.ds-rule-cyan {
  height: 2px;
  width: 56px;
  background: var(--cyan-500);
  box-shadow: var(--glow-sm);
  border: 0;
}

/* Faint technical grid background */
.ds-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}