/* TokenSail — Design Tokens
   Visual concept: Deep-sea Data Instrument
   One dominant ink canvas + signal-teal accent + amber warning. */

/* ---- Web Fonts (China-friendly mirror) ---- */
@import url("https://fonts.loli.net/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Color: canvas & surfaces ---- */
  --ink: #0A0E1A;
  --ink-2: #0D1322;
  --panel: #121829;
  --panel-2: #161D33;
  --panel-hi: #1C2540;
  --line: #232C49;
  --line-soft: #1A2238;

  /* ---- Color: text ---- */
  --text: #E6ECF5;
  --text-dim: #9AA7BF;
  --text-faint: #8595AF;   /* bumped from #6B7794 for WCAG AA 4.5:1 on panel */
  --text-mute: #7E8DA6;    /* bumped from #5C6986 for WCAG AA 4.5:1 on panel */

  /* ---- Color: brand / signal ---- */
  --accent: #4FD1C5;        /* signal teal — sailing/normal */
  --accent-deep: #2BA89C;
  --accent-glow: rgba(79, 209, 197, 0.35);
  --warn: #F6AD55;          /* amber — inversion / low balance */
  --warn-glow: rgba(246, 173, 85, 0.28);
  --danger: #F87171;
  --danger-glow: rgba(248, 113, 113, 0.25);
  --ok: #4FD1C5;
  --info: #7AA2F7;
  --violet: #A78BFA;

  /* provider accents */
  --p-openai: #74E0C0;
  --p-anthropic: #E8A06b;
  --p-gemini: #7AA2F7;
  --p-qwen: #C0A2F7;
  --p-deepseek: #6FB3F7;

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-ui: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;
  --fs-4xl: 56px;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- Spacing ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadow / glow ---- */
  --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 64px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px rgba(79,209,197,0.25), 0 8px 32px rgba(79,209,197,0.15);

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1320px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --ink: #F8FAFC;
  --ink-2: #F1F5F9;
  --panel: #FFFFFF;
  --panel-2: #F8FAFC;
  --panel-hi: #EFF3F8;
  --line: #E2E8F0;
  --line-soft: #EDF2F7;

  --text: #1A202C;
  --text-dim: #4A5568;
  --text-faint: #718096;
  --text-mute: #A0AEC0;

  --accent: #2BA89C;
  --accent-deep: #1E7A72;
  --accent-glow: rgba(43, 168, 156, 0.2);
  --warn: #D69E2E;
  --warn-glow: rgba(214, 158, 46, 0.2);
  --danger: #E53E3E;
  --danger-glow: rgba(229, 62, 62, 0.15);
  --ok: #2BA89C;
  --info: #4C6EF5;
  --violet: #7C3AED;

  /* 亮色模式下柔化阴影，避免深色投影发浑 */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 24px 64px rgba(15,23,42,0.12);
  --glow-accent: 0 0 0 1px rgba(43,168,156,0.2), 0 8px 32px rgba(43,168,156,0.12);
}

/* 系统亮色偏好 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #F8FAFC;
    --ink-2: #F1F5F9;
    --panel: #FFFFFF;
    --panel-2: #F8FAFC;
    --panel-hi: #EFF3F8;
    --line: #E2E8F0;
    --line-soft: #EDF2F7;

    --text: #1A202C;
    --text-dim: #4A5568;
    --text-faint: #718096;
    --text-mute: #A0AEC0;

    --accent: #2BA89C;
    --accent-deep: #1E7A72;
    --accent-glow: rgba(43, 168, 156, 0.2);
    --warn: #D69E2E;
    --warn-glow: rgba(214, 158, 46, 0.2);
    --danger: #E53E3E;
    --danger-glow: rgba(229, 62, 62, 0.15);
    --ok: #2BA89C;
    --info: #4C6EF5;
    --violet: #7C3AED;

    /* 亮色模式下柔化阴影，避免深色投影发浑 */
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
    --shadow-lg: 0 24px 64px rgba(15,23,42,0.12);
    --glow-accent: 0 0 0 1px rgba(43,168,156,0.2), 0 8px 32px rgba(43,168,156,0.12);
  }
}