/* ══════════════════════════════════════════════════════════════════════
   AI追光 — Colors & Type
   Brand: AI追光 (AI ZhuiGuang / "Lightchaser")
   Tagline: 用人工智能追逐影视的光与故事
   ══════════════════════════════════════════════════════════════════════ */

/* ─── FONTS ─── */
/* Inter       — display & UI (professional, the canonical UI face)
   Noto Sans SC — Chinese display at heavy weights (clean, modern)
   Sora        — alt display (modern geometric tech, kept for niche use)
   Geist Mono  — code, prompt output, metadata (modern, professional)
   字体全部本地化(fonts/ 目录)— 不再依赖 Google Fonts CDN
   Noto Sans SC 用子集分片(fonts/notosc/),浏览器按需加载,首屏仅 ~50KB */
@import url('fonts/notosc/notosc.css');

:root {
  /* ── SURFACES (dark, very deep blue-black) ── */
  --bg:        #070810;   /* deepest — page bg */
  --bg-2:      #0c0d1a;   /* secondary panel */
  --bg-3:      #111320;   /* cards / sections */
  --bg-4:      #161828;   /* elevated / hover */
  --bg-5:      #1c1e30;   /* highest elevation */

  /* Translucent surface tints (over dark bg) */
  --sf:        rgba(255,255,255,0.035);
  --sf-2:      rgba(255,255,255,0.065);
  --sf-3:      rgba(255,255,255,0.10);

  /* ── BORDERS ── */
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.13);
  --line-3:    rgba(255,255,255,0.24);

  /* ── TEXT ── */
  --fg:        #e8eaf6;                       /* primary text */
  --fg-2:      rgba(232,234,246,0.72);        /* secondary */
  --fg-3:      rgba(232,234,246,0.42);        /* tertiary / labels */
  --fg-4:      rgba(232,234,246,0.20);        /* placeholder / disabled */
  --fg-5:      rgba(232,234,246,0.12);        /* hairline / icon dim */

  /* ── BRAND ACCENTS ──
     Each "function" in the product carries one of these colors.
     They double as semantic state colors. */
  --gold:      #f5c842;    /* images · primary brand */
  --gold-2:    #ffd060;
  --gold-d:    rgba(245,200,66,0.12);
  --gold-glow: 0 0 24px rgba(245,200,66,0.32);

  --cyan:      #2dd4f5;    /* video */
  --cyan-d:    rgba(45,212,245,0.12);

  --violet:    #b06fff;    /* characters / multi */
  --violet-d:  rgba(176,111,255,0.12);

  --mint:      #1fd4a0;    /* story / success */
  --mint-d:    rgba(31,212,160,0.11);

  --rose:      #ff4d6d;    /* delete / danger */
  --rose-d:    rgba(255,77,109,0.11);

  --blue:      #4f8ef7;    /* info accent */
  --blue-d:    rgba(79,142,247,0.12);

  --orange:    #ff7640;    /* secondary brand (logo gradient mid) */

  /* ── SIGNATURE BRAND GRADIENT ── */
  --grad-brand: linear-gradient(135deg, #f5c842 0%, #ff7640 50%, #ff4d6d 100%);
  --grad-img:   linear-gradient(90deg, #f5c842, #f97316);
  --grad-vid:   linear-gradient(90deg, #2dd4f5, #4f8ef7);
  --grad-char:  linear-gradient(90deg, #b06fff, #ec4899);
  --grad-story: linear-gradient(90deg, #1fd4a0, #2dd4f5);

  /* Logo wordmark gradient (white → gold) */
  --grad-wordmark: linear-gradient(135deg, #ffffff 30%, #f5c842 100%);

  /* Ambient room-light (used on body) */
  --ambient-bg:
    radial-gradient(ellipse 75% 45% at 0% 0%,   rgba(79,142,247,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(176,111,255,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 55% 40%, rgba(245,200,66,0.05) 0%, transparent 60%);

  /* ── RADIUS SCALE ── */
  --r-1: 6px;     /* chips, small controls */
  --r-2: 8px;     /* buttons, inputs */
  --r-3: 12px;    /* panels, prompt box */
  --r-4: 16px;    /* section cards */
  --r-5: 20px;    /* hero / large surfaces */

  /* ── SHADOWS / ELEVATION ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow:    0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);

  /* Color-cast glows for accent buttons / dots */
  --glow-gold:   0 0 14px rgba(245,200,66,0.25);
  --glow-cyan:   0 0 12px rgba(45,212,245,0.20);
  --glow-mint:   0 0 12px rgba(31,212,160,0.18);
  --glow-violet: 0 0 12px rgba(176,111,255,0.20);

  /* ── SPACING SCALE ── (consistent 4px rhythm) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ── TYPE FAMILIES ── */
  --font-display:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:       'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif-zh:   'Noto Sans SC', 'PingFang SC', sans-serif;  /* legacy alias */
  --font-alt:        'Sora', sans-serif;
  --font-mono:       'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── TYPE SCALE ── (compact, dense UI) */
  --t-9:  9px;     /* micro labels */
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;    /* default UI text */
  --t-13: 13px;    /* body / list rows */
  --t-14: 14px;    /* card titles */
  --t-16: 16px;
  --t-19: 19px;    /* logo wordmark */
  --t-22: 22px;
  --t-28: 28px;
  --t-36: 36px;
  --t-48: 48px;
  --t-64: 64px;

  /* ── MOTION ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* ══════════════════════════════════════════════════════════════════════
   SEMANTIC TYPE PRESETS
   Use these classes on raw elements when you want the AI追光 voice.
   ══════════════════════════════════════════════════════════════════════ */

body {
  background: var(--bg);
  background-image: var(--ambient-bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-13);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.logo-wordmark {
  font-family: var(--font-serif-zh);
  font-weight: 900;
  font-size: var(--t-19);
  letter-spacing: 0.06em;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--t-48);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--t-19);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg);
}

.title-zh {
  font-family: var(--font-serif-zh);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* All-caps section/group labels — tiny, tracked */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-10);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow-gold {
  font-family: var(--font-display);
  font-size: var(--t-9);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.p {
  font-size: var(--t-13);
  line-height: 1.65;
  color: var(--fg-2);
}

.p-sm {
  font-size: var(--t-11);
  line-height: 1.55;
  color: var(--fg-3);
}

.caption {
  font-size: var(--t-10);
  color: var(--fg-4);
  font-style: italic;
}

.code,
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  color: var(--fg);
}

/* Generic mapping — `<h1>` etc. inherit the visual scale automatically */
h1 { font: 800 var(--t-48)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--fg); }
h2 { font: 700 var(--t-28)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg); }
h3 { font: 700 var(--t-19)/1.25 var(--font-display); color: var(--fg); }
h4 { font: 700 var(--t-14)/1.3  var(--font-display); color: var(--fg); }
code, pre { font-family: var(--font-mono); }

/* ══════════════════════════════════════════════════
   LOCAL FONT FILES — 已启用
   ═════════════════════════════════════════════════ */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Inter-Regular.woff2')    format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Inter-Medium.woff2')     format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Inter-SemiBold.woff2')   format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Inter-Bold.woff2')       format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Inter-ExtraBold.woff2')  format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Inter-Black.woff2')      format('woff2'); }

/* Noto Sans SC: 走 fonts/notosc/notosc.css 子集分片(顶部 @import),浏览器按需加载 */

@font-face { font-family: 'Geist Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/GeistMono-Regular.woff2')  format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/GeistMono-Medium.woff2')   format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/GeistMono-SemiBold.woff2') format('woff2'); }