/* ============================================================
   IRON LEGION — colors_and_type.css
   無人軍團：AI戰爭王者帕爾默．拉奇與Anduril的崛起
   Visual DNA: deep-space navy, cyan drone-glow, chrome titles,
   orange caution-band accents, military readout type.
   ============================================================ */

/* ---- Webfonts (Google Fonts — flagged substitutions in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Noto+Sans+TC:wght@400;500;700;900&family=Bebas+Neue&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLORS — base palette
     ============================================================ */

  /* Space — primary background family. The cover's deep void. */
  --space-900: #04070d;   /* near-black, true void */
  --space-800: #0a1018;   /* primary surface */
  --space-700: #101826;   /* card surface */
  --space-600: #1a2536;   /* raised surface / dividers */
  --space-500: #283346;   /* hairlines on dark */

  /* Steel — cool neutrals, the metallic "chrome" of the title */
  --steel-100: #f3f5f8;   /* near-white, chrome highlight */
  --steel-200: #d9dfe7;
  --steel-300: #b6bfcc;
  --steel-400: #8a95a6;   /* muted body on dark */
  --steel-500: #5e6878;
  --steel-600: #3f4858;

  /* Cyan — the drone glow. Anduril/Roadrunner signature. */
  --cyan-100: #d3f7ff;
  --cyan-300: #67d8f1;
  --cyan-500: #18b8d9;    /* primary accent */
  --cyan-600: #0a8fa9;
  --cyan-700: #07687a;

  /* Caution — the cover's orange-yellow band. High-energy CTAs. */
  --caution-100: #ffe9b0;
  --caution-300: #ffc54a;
  --caution-500: #f59010;  /* primary CTA / band */
  --caution-600: #cb6c05;
  --caution-700: #8a4504;

  /* Alert — sanction red, "China/PLA threat" callouts */
  --alert-500: #e0402c;
  --alert-600: #b32514;

  /* Olive — gentle land/military neutral, used VERY sparingly */
  --olive-500: #6b7042;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --bg:           var(--space-900);
  --bg-surface:   var(--space-800);
  --bg-card:      var(--space-700);
  --bg-raised:    var(--space-600);

  --fg:           var(--steel-100);    /* primary text on dark */
  --fg-muted:     var(--steel-300);
  --fg-dim:       var(--steel-400);
  --fg-faint:     var(--steel-500);

  --border:       var(--space-500);
  --border-strong: var(--steel-600);
  --hairline:     rgba(243, 245, 248, 0.08);

  --accent:       var(--cyan-500);
  --accent-soft:  var(--cyan-300);
  --accent-deep:  var(--cyan-700);

  --cta:          var(--caution-500);
  --cta-hover:    var(--caution-300);
  --cta-fg:       var(--space-900);

  --warn:         var(--alert-500);

  /* Light-mode tokens (for marketing pages, blurbs, print previews) */
  --paper:        #f6f3ec;             /* warm book-paper */
  --paper-2:      #ece7da;
  --ink:          #0a1018;             /* same as space-800 */
  --ink-muted:    #404a5b;

  /* ============================================================
     RADII / SHADOWS / SPACING
     ============================================================ */
  --radius-sm: 2px;       /* military readouts: nearly square */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 24px rgba(24, 184, 217, 0.45);   /* cyan drone glow */
  --shadow-cta:  0 6px 20px rgba(245, 144, 16, 0.35);  /* caution band */
  --inset-hairline: inset 0 0 0 1px var(--hairline);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ============================================================
     TYPE — base families
     ============================================================ */
  --font-display-cjk: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
  --font-sans-cjk:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-display-en:  "Bebas Neue", "Impact", "Oswald", sans-serif;  /* military stencil-adjacent */
  --font-sans-en:     "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ============================================================
     SEMANTIC TYPE TOKENS
     ============================================================ */
  --t-hero-size:    clamp(64px, 9vw, 128px);
  --t-hero-weight:  900;
  --t-hero-tracking: 0.04em;
  --t-hero-leading: 0.95;

  --t-display-size:    clamp(40px, 5vw, 72px);
  --t-display-weight:  900;
  --t-display-leading: 1.05;

  --t-h1-size: 40px;  --t-h1-weight: 900;  --t-h1-leading: 1.15;
  --t-h2-size: 30px;  --t-h2-weight: 800;  --t-h2-leading: 1.2;
  --t-h3-size: 22px;  --t-h3-weight: 700;  --t-h3-leading: 1.3;
  --t-h4-size: 18px;  --t-h4-weight: 700;  --t-h4-leading: 1.35;

  --t-lead-size: 20px; --t-lead-leading: 1.6;     /* book intro paragraphs */
  --t-body-size: 16px; --t-body-leading: 1.75;    /* CJK reads better at 1.7+ */
  --t-small-size: 14px; --t-small-leading: 1.55;
  --t-caption-size: 12px; --t-caption-leading: 1.4;

  --t-eyebrow-size: 12px;
  --t-eyebrow-tracking: 0.24em;
  --t-eyebrow-weight: 700;

  --t-readout-size: 11px;     /* military readout / spec line */
  --t-readout-tracking: 0.18em;
}

/* ============================================================
   ELEMENT DEFAULTS — consume the tokens above
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans-cjk), var(--font-sans-en);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display-cjk), var(--font-display-en);
  color: var(--fg);
  letter-spacing: 0.02em;
}

h1 { font-size: var(--t-h1-size); font-weight: var(--t-h1-weight); line-height: var(--t-h1-leading); }
h2 { font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); line-height: var(--t-h2-leading); }
h3 { font-size: var(--t-h3-size); font-weight: var(--t-h3-weight); line-height: var(--t-h3-leading); }
h4 { font-size: var(--t-h4-size); font-weight: var(--t-h4-weight); line-height: var(--t-h4-leading); }

p  { font-size: var(--t-body-size); line-height: var(--t-body-leading); color: var(--fg-muted); text-wrap: pretty; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.t-hero {
  font-family: var(--font-display-cjk);
  font-size: var(--t-hero-size);
  font-weight: var(--t-hero-weight);
  line-height: var(--t-hero-leading);
  letter-spacing: var(--t-hero-tracking);
}

.t-display    { font-family: var(--font-display-cjk); font-size: var(--t-display-size); font-weight: 900; line-height: 1.05; }
.t-display-en { font-family: var(--font-display-en); letter-spacing: 0.06em; text-transform: uppercase; }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow-size);
  letter-spacing: var(--t-eyebrow-tracking);
  font-weight: var(--t-eyebrow-weight);
  text-transform: uppercase;
  color: var(--accent);
}

.t-readout {
  font-family: var(--font-mono);
  font-size: var(--t-readout-size);
  letter-spacing: var(--t-readout-tracking);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.t-lead    { font-size: var(--t-lead-size); line-height: var(--t-lead-leading); color: var(--fg-muted); }
.t-small   { font-size: var(--t-small-size); line-height: var(--t-small-leading); }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-leading); color: var(--fg-dim); }

/* "Chrome" gradient title — recreates the cover's metallic 無人軍團 */
.t-chrome {
  background: linear-gradient(180deg,
    #ffffff  0%,
    #c9d4e0 28%,
    #6c7a8c 52%,
    #aab6c5 64%,
    #f1f4f8 78%,
    #5d6878 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.2);
}

.t-cyan-glow {
  color: var(--cyan-300);
  text-shadow: 0 0 18px rgba(24, 184, 217, 0.55);
}