/* knaad ser — design tokens
   single source for brand colors, typography, spacing.
   labs reference these via var(--ks-*) and inherit colors that
   were previously hardcoded. */

:root {
  /* brand palette */
  --ks-teal: #00BFA6;
  --ks-sky: #00AEEF;
  --ks-deep: #0D1B2A;
  --ks-mist: #F2F4F7;
  --ks-white: #FFFFFF;

  /* canonical surfaces (dark mode is the default) */
  --ks-bg: var(--ks-deep);
  --ks-bg-soft: #11233a;
  --ks-bg-card: #15273e;
  --ks-bg-elev: #1a2e47;

  /* lines */
  --ks-line: rgba(255, 255, 255, 0.08);
  --ks-line-strong: rgba(255, 255, 255, 0.18);
  --ks-line-brand: rgba(0, 191, 166, 0.45);

  /* ink */
  --ks-ink: #f3f4f7;
  --ks-ink-soft: #b6c2d1;
  --ks-ink-mute: #6a7a8e;

  /* accents */
  --ks-accent: var(--ks-teal);
  --ks-accent-2: var(--ks-sky);
  --ks-glow: rgba(0, 191, 166, 0.18);
  --ks-glow-strong: rgba(0, 191, 166, 0.32);

  /* gradients */
  --ks-grad-brand: linear-gradient(90deg, var(--ks-teal) 0%, var(--ks-sky) 60%, var(--ks-deep) 100%);
  --ks-grad-soft: linear-gradient(180deg, rgba(0, 191, 166, 0.08), transparent 70%);

  /* typography */
  --ks-font: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ks-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ks-text-xs: 11px;
  --ks-text-sm: 13px;
  --ks-text-md: 15px;
  --ks-text-lg: 18px;
  --ks-text-xl: 22px;
  --ks-text-2xl: 28px;
  --ks-text-3xl: 36px;
  --ks-text-display: clamp(2.25rem, 6vw, 4.25rem);

  /* radius */
  --ks-radius-sm: 6px;
  --ks-radius-md: 10px;
  --ks-radius-lg: 16px;
  --ks-radius-xl: 22px;

  /* spacing scale (4px base) */
  --ks-s1: 4px;
  --ks-s2: 8px;
  --ks-s3: 12px;
  --ks-s4: 16px;
  --ks-s5: 24px;
  --ks-s6: 32px;
  --ks-s7: 48px;
  --ks-s8: 64px;

  /* shadows */
  --ks-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --ks-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --ks-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --ks-shadow-brand: 0 12px 40px rgba(0, 191, 166, 0.18);

  /* topbar */
  --ks-topbar-h: 56px;

  /* legacy aliases for existing labs (so old vars keep resolving to brand) */
  --bg: var(--ks-bg);
  --fg: var(--ks-ink);
  --ink: var(--ks-ink);
  --ink-soft: var(--ks-ink-soft);
  --line: var(--ks-line);
  --line-strong: var(--ks-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}