/* JM Technology — Design Tokens
   Structure × Flow × Realtime
   Use on dark surfaces by default (deep blue is the brand canvas). */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand colors ───────────────────────────────────────── */
  --jm-deep-blue: #0A1E3D;
  --jm-tech-blue: #1266FF;
  --jm-cyan: #00C8FF;
  --jm-white: #FFFFFF;
  --jm-dark: #111111;
  --jm-gray: #6B7280;

  /* Tints / shades for surfaces and text on dark */
  --jm-deep-blue-900: #050F22;
  --jm-deep-blue-800: #0A1E3D;
  --jm-deep-blue-700: #112C56;
  --jm-deep-blue-600: #173B73;
  --jm-blue-500: #1266FF;
  --jm-blue-400: #4A88FF;
  --jm-cyan-400: #00C8FF;
  --jm-cyan-300: #5BDCFF;
  --jm-cyan-200: #A3EAFF;

  /* Neutrals (light surfaces) */
  --jm-gray-50: #F8FAFC;
  --jm-gray-100: #F1F4F9;
  --jm-gray-200: #E5E7EB;
  --jm-gray-300: #D1D5DB;
  --jm-gray-400: #9CA3AF;
  --jm-gray-500: #6B7280;
  --jm-gray-700: #374151;
  --jm-gray-900: #111111;

  /* Semantic — foreground (on dark canvas) */
  --jm-fg-1: #FFFFFF;                     /* primary text on dark */
  --jm-fg-2: rgba(255,255,255,0.72);      /* secondary text */
  --jm-fg-3: rgba(255,255,255,0.48);      /* muted / captions */
  --jm-fg-accent: var(--jm-cyan);
  --jm-fg-link: var(--jm-cyan);

  /* Semantic — foreground (on light) */
  --jm-fg-1-light: #111111;
  --jm-fg-2-light: #374151;
  --jm-fg-3-light: #6B7280;

  /* Surfaces */
  --jm-bg: var(--jm-deep-blue);
  --jm-bg-elevated: rgba(255,255,255,0.03);
  --jm-bg-glass: rgba(10,30,61,0.6);
  --jm-bg-light: #FFFFFF;
  --jm-bg-light-subtle: var(--jm-gray-50);

  /* Borders */
  --jm-border: rgba(255,255,255,0.08);
  --jm-border-strong: rgba(255,255,255,0.16);
  --jm-border-active: rgba(0,200,255,0.4);
  --jm-border-light: #E5E7EB;

  /* Status */
  --jm-success: #22C55E;
  --jm-warning: #F59E0B;
  --jm-danger: #EF4444;
  --jm-info: var(--jm-cyan);

  /* ── Gradients ──────────────────────────────────────────── */
  --jm-gradient-primary: linear-gradient(135deg, #0A1E3D 0%, #1266FF 55%, #00C8FF 100%);
  --jm-gradient-line: linear-gradient(90deg, transparent 0%, #00C8FF 50%, transparent 100%);
  --jm-gradient-glow: radial-gradient(circle at 70% 20%, rgba(0,200,255,0.25) 0%, transparent 60%);
  --jm-gradient-button: linear-gradient(135deg, #1266FF 0%, #00C8FF 100%);
  --jm-gradient-text: linear-gradient(90deg, #FFFFFF 0%, #00C8FF 100%);

  /* ── Type ───────────────────────────────────────────────── */
  --jm-font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --jm-font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --jm-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --jm-font-display: 'Noto Sans TC', 'Inter', sans-serif;

  /* Sizes (px values, used as fluid clamp targets) */
  --jm-text-xs: 12px;
  --jm-text-sm: 14px;
  --jm-text-base: 16px;
  --jm-text-md: 18px;
  --jm-text-lg: 20px;
  --jm-text-xl: 24px;
  --jm-text-2xl: 32px;
  --jm-text-3xl: 40px;
  --jm-text-4xl: 56px;
  --jm-text-5xl: 72px;
  --jm-text-6xl: 96px;

  /* Semantic type roles */
  --jm-h1-size: clamp(48px, 6vw, 96px);
  --jm-h1-weight: 900;
  --jm-h1-tracking: 0.02em;
  --jm-h1-leading: 1.05;

  --jm-h2-size: clamp(36px, 4vw, 56px);
  --jm-h2-weight: 700;
  --jm-h2-leading: 1.1;

  --jm-h3-size: 32px;
  --jm-h3-weight: 700;
  --jm-h3-leading: 1.2;

  --jm-h4-size: 20px;
  --jm-h4-weight: 600;
  --jm-h4-leading: 1.3;

  --jm-eyebrow-size: 14px;
  --jm-eyebrow-weight: 600;
  --jm-eyebrow-tracking: 0.16em;

  --jm-p-size: 16px;
  --jm-p-leading: 1.65;

  --jm-caption-size: 13px;

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

  /* Layout */
  --jm-container: 1200px;
  --jm-rail: 1440px;
  --jm-section-pad: clamp(64px, 9vw, 128px);

  /* ── Radii ──────────────────────────────────────────────── */
  --jm-radius-xs: 4px;
  --jm-radius-sm: 8px;
  --jm-radius-md: 12px;
  --jm-radius-lg: 16px;
  --jm-radius-xl: 24px;
  --jm-radius-pill: 999px;

  /* ── Shadows / glow ─────────────────────────────────────── */
  --jm-shadow-card-light: 0 1px 2px rgba(10,30,61,0.06), 0 8px 24px rgba(10,30,61,0.08);
  --jm-shadow-card-dark: inset 0 1px 0 rgba(255,255,255,0.05);
  --jm-glow-cyan: 0 0 24px rgba(0,200,255,0.45);
  --jm-glow-cyan-soft: 0 0 0 1px rgba(0,200,255,0.3), 0 8px 32px rgba(0,200,255,0.15);
  --jm-glow-button: 0 8px 24px rgba(18,102,255,0.35), 0 0 32px rgba(0,200,255,0.25);

  /* ── Motion ─────────────────────────────────────────────── */
  --jm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --jm-dur-fast: 150ms;
  --jm-dur-base: 200ms;
  --jm-dur-slow: 400ms;
  --jm-dur-hero: 600ms;
}

/* ── Element defaults ──────────────────────────────────────── */
html { font-family: var(--jm-font-zh); color: var(--jm-fg-1); }
body { background: var(--jm-bg); color: var(--jm-fg-1); font-size: var(--jm-p-size); line-height: var(--jm-p-leading); }

h1, .jm-h1 {
  font-family: var(--jm-font-display);
  font-size: var(--jm-h1-size);
  font-weight: var(--jm-h1-weight);
  letter-spacing: var(--jm-h1-tracking);
  line-height: var(--jm-h1-leading);
}
h2, .jm-h2 { font-family: var(--jm-font-display); font-size: var(--jm-h2-size); font-weight: var(--jm-h2-weight); line-height: var(--jm-h2-leading); }
h3, .jm-h3 { font-family: var(--jm-font-display); font-size: var(--jm-h3-size); font-weight: var(--jm-h3-weight); line-height: var(--jm-h3-leading); }
h4, .jm-h4 { font-family: var(--jm-font-display); font-size: var(--jm-h4-size); font-weight: var(--jm-h4-weight); line-height: var(--jm-h4-leading); }
.jm-eyebrow { font-family: var(--jm-font-en); font-size: var(--jm-eyebrow-size); font-weight: var(--jm-eyebrow-weight); letter-spacing: var(--jm-eyebrow-tracking); text-transform: uppercase; color: var(--jm-cyan); }
p, .jm-p { font-size: var(--jm-p-size); line-height: var(--jm-p-leading); color: var(--jm-fg-2); }
.jm-caption { font-size: var(--jm-caption-size); color: var(--jm-fg-3); }
code, .jm-mono { font-family: var(--jm-font-mono); font-size: 0.92em; }

/* Gradient text */
.jm-text-gradient {
  background: var(--jm-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}