/* =========================================================
   Zephyr Robotics — Core Tokens
   追风机器人视觉设计源语
   ========================================================= */

/* ---------- Web fonts ---------- */
/* Substitution notice: Using Google Fonts as closest matches.
   Display/UI: "Space Grotesk" — geometric, slightly humanist, tech.
   Mono:       "JetBrains Mono" — data, telemetry, IDs.
   CJK:        "Noto Sans SC"   — Simplified Chinese companion.
   Replace with branded fonts when available. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

:root {
  /* ========== COLOR — Neutrals (Hi-Grey Scale) ========== */
  /* Cool, slightly blue-shifted greys — the base for every surface. */
  --grey-000: #0A0C10;   /* deepest void — page base on dark mode */
  --grey-050: #0F1217;   /* app bg */
  --grey-100: #14181F;   /* elevated surface 1 */
  --grey-200: #1B2029;   /* elevated surface 2, cards */
  --grey-300: #242A35;   /* hover, subtle divider bg */
  --grey-400: #323A47;   /* borders, strokes */
  --grey-500: #4A5464;   /* muted icons */
  --grey-600: #6B7687;   /* tertiary text */
  --grey-700: #8F99AA;   /* secondary text */
  --grey-800: #B8C0CC;   /* primary text on dark */
  --grey-900: #E3E7ED;   /* highest emphasis text */
  --grey-999: #F5F7FA;   /* pure near-white */

  /* ========== COLOR — Primary (Cyber Cyan) ========== */
  /* The signature neon — used sparingly for primary action, live data, energy. */
  --cyan-100: #D4FBFF;
  --cyan-200: #8BF0FF;
  --cyan-300: #3DE3FF;
  --cyan-400: #00D4FF;   /* ★ primary brand */
  --cyan-500: #00B8E6;
  --cyan-600: #0092B8;
  --cyan-700: #006B87;
  --cyan-800: #003D4D;
  --cyan-900: #001F28;

  /* Glow — used for shadows, auras, beams */
  --cyan-glow-sm: 0 0 12px rgba(0, 212, 255, 0.35);
  --cyan-glow-md: 0 0 24px rgba(0, 212, 255, 0.45);
  --cyan-glow-lg: 0 0 48px rgba(0, 212, 255, 0.55);

  /* ========== COLOR — Semantic ========== */
  --success-400: #00F5A0;       /* mission OK, delivered */
  --success-700: #004D33;
  --warning-400: #FFC857;       /* low battery, attention */
  --warning-700: #664500;
  --danger-400:  #FF3D71;       /* fault, e-stop */
  --danger-700:  #4D0022;
  --info-400:    #7C9BFF;       /* neutral informational */

  /* Accent — Magenta counter-tone, used VERY sparingly */
  --magenta-400: #FF2E9F;

  /* ========== COLOR — Semantic aliases (use these in product) ========== */
  --bg-canvas:      var(--grey-050);
  --bg-surface:     var(--grey-100);
  --bg-raised:      var(--grey-200);
  --bg-hover:       var(--grey-300);
  --bg-overlay:     rgba(10, 12, 16, 0.72);

  --fg-primary:     var(--grey-900);
  --fg-secondary:   var(--grey-800);
  --fg-tertiary:    var(--grey-700);
  --fg-muted:       var(--grey-600);
  --fg-disabled:    var(--grey-500);
  --fg-on-accent:   #001018;

  --accent:         var(--cyan-400);
  --accent-hover:   var(--cyan-300);
  --accent-press:   var(--cyan-500);
  --accent-dim:     var(--cyan-800);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-accent:  var(--cyan-400);

  --focus-ring:     0 0 0 2px var(--grey-050), 0 0 0 4px var(--cyan-400);

  /* ========== TYPE — Families ========== */
  --font-display: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ========== TYPE — Scale (modular 1.25) ========== */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.14em;   /* labels, eyebrows — signature wide tracking */

  /* ========== SPACING (4px base) ========== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ========== RADII (minimal, favor sharp edges) ========== */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* ========== ELEVATION ========== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-glow: var(--cyan-glow-md);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ========== MOTION ========== */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-med:    200ms;
  --dur-slow:   400ms;
}

/* =========================================================
   Semantic type roles — apply as classes or mixins
   ========================================================= */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}
.t-label {
  /* Signature eyebrow/label — wide-tracked uppercase */
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.t-label-accent {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--fg-secondary);
  font-feature-settings: "tnum";
}
.t-data {
  /* Large telemetry readout */
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--fg-primary);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

/* Utilities */
.u-text-accent { color: var(--accent); }
.u-text-muted  { color: var(--fg-muted); }
.u-text-danger { color: var(--danger-400); }
.u-text-success { color: var(--success-400); }