/* =========================================================
   TextBases Design Tokens V1
   Central source of truth for colors, font, spacing, radius,
   shadows, layout widths, and motion.
   Change this file to re-theme the whole website.
   ========================================================= */

:root {
  color-scheme: dark;

  /* Brand */
  --tb-brand-name: "TextBases.app";

  /* Font */
  --tb-font-main: Inter, "Suisse Int'l", "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tb-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Background */
  --tb-bg: #020617;
  --tb-bg-2: #07111f;
  --tb-bg-soft: #0f172a;
  --tb-bg-gradient:
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.14), transparent 26%),
    radial-gradient(circle at 84% 16%, rgba(124, 58, 237, 0.16), transparent 28%),
    linear-gradient(180deg, #020617 0%, #07111f 46%, #020617 100%);

  /* Surfaces */
  --tb-surface: rgba(15, 23, 42, 0.78);
  --tb-surface-strong: rgba(15, 23, 42, 0.92);
  --tb-surface-soft: rgba(30, 41, 59, 0.54);
  --tb-surface-glass: rgba(15, 23, 42, 0.66);
  --tb-surface-hover: rgba(30, 41, 59, 0.82);

  /* Text */
  --tb-text: #f8fafc;
  --tb-text-soft: #e2e8f0;
  --tb-muted: #94a3b8;
  --tb-muted-2: #64748b;

  /* Accent */
  --tb-accent: #38bdf8;
  --tb-accent-2: #7c3aed;
  --tb-accent-3: #22d3ee;
  --tb-accent-soft: rgba(56, 189, 248, 0.14);
  --tb-accent-border: rgba(56, 189, 248, 0.36);
  --tb-accent-glow: 0 0 42px rgba(56, 189, 248, 0.22);

  /* Status */
  --tb-success: #34d399;
  --tb-warning: #fbbf24;
  --tb-danger: #fb7185;

  /* Border */
  --tb-border: rgba(148, 163, 184, 0.16);
  --tb-border-strong: rgba(148, 163, 184, 0.26);
  --tb-border-soft: rgba(148, 163, 184, 0.10);

  /* Radius */
  --tb-radius-xs: 10px;
  --tb-radius-sm: 14px;
  --tb-radius-md: 18px;
  --tb-radius-lg: 24px;
  --tb-radius-xl: 28px;
  --tb-radius-2xl: 34px;
  --tb-radius-pill: 999px;

  /* Shadows */
  --tb-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.22);
  --tb-shadow-card: 0 24px 80px rgba(0, 0, 0, 0.30);
  --tb-shadow-glow: 0 0 44px rgba(56, 189, 248, 0.16);

  /* Layout */
  --tb-container: 1180px;
  --tb-container-wide: 1320px;
  --tb-page-pad: clamp(18px, 4vw, 32px);
  --tb-section-gap: clamp(28px, 5vw, 54px);
  --tb-card-pad: clamp(20px, 3vw, 30px);
  --tb-control-height: 46px;
  --tb-navbar-height: 72px;

  /* Motion */
  --tb-transition: 180ms ease;
  --tb-transition-slow: 260ms ease;
}