/**
 * TaraBytes Design System — Digital Focus
 * Brand: Forest + Gold (VenturePlanner-adapted)
 * Use these tokens across marketing, product UI, and agent experiences.
 */

:root {
  /* ——— Brand ——— */
  --tb-brand-name: "TaraBytes";
  --tb-brand-tagline: "15 years corporate. Startup speed.";

  /* ——— Color · Core ——— */
  --tb-forest-900: #0f2423;
  --tb-forest-800: #142826;
  --tb-forest-700: #163332;
  --tb-forest-600: #1c413f;
  --tb-forest-500: #2f5d57;
  --tb-gold-500: #ffc745;
  --tb-gold-600: #f0b820;
  --tb-gold-300: #ffe6a3;
  --tb-gold-200: #fff1c9;
  --tb-cream-50: #fbfaf6;
  --tb-cream-100: #f7f6f1;
  --tb-cream-200: #efeee8;
  --tb-white: #ffffff;
  --tb-ink: #142826;
  --tb-muted: #5c6b69;
  --tb-line: rgba(22, 51, 50, 0.12);
  --tb-line-strong: rgba(22, 51, 50, 0.22);
  --tb-success: #28c840;
  --tb-warning: #febc2e;
  --tb-danger: #ff5f57;
  --tb-info: #9fd6c8;

  /* Aliases used by the site */
  --tb-forest: var(--tb-forest-700);
  --tb-forest-2: var(--tb-forest-600);
  --tb-forest-3: var(--tb-forest-900);
  --tb-gold: var(--tb-gold-500);
  --tb-gold-2: var(--tb-gold-600);
  --tb-gold-soft: var(--tb-gold-300);
  --tb-cream: var(--tb-cream-100);
  --tb-cream-2: var(--tb-cream-200);

  /* ——— Color · Semantic (digital product) ——— */
  --tb-bg: var(--tb-cream-100);
  --tb-bg-elevated: var(--tb-white);
  --tb-bg-inverse: var(--tb-forest-700);
  --tb-bg-accent: var(--tb-gold-500);
  --tb-text: var(--tb-ink);
  --tb-text-muted: var(--tb-muted);
  --tb-text-inverse: #ffffff;
  --tb-text-on-accent: var(--tb-forest-700);
  --tb-border: var(--tb-line);
  --tb-focus-ring: 0 0 0 3px rgba(255, 199, 69, 0.35);

  /* ——— Typography ——— */
  --tb-font-display: "Space Grotesk", sans-serif;
  --tb-font-body: "Plus Jakarta Sans", sans-serif;
  --tb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tb-fs-xs: 0.72rem;
  --tb-fs-sm: 0.88rem;
  --tb-fs-md: 1rem;
  --tb-fs-lg: 1.125rem;
  --tb-fs-xl: 1.35rem;
  --tb-fs-2xl: 1.75rem;
  --tb-fs-3xl: 2.4rem;
  --tb-fs-4xl: 3.2rem;
  --tb-fs-hero: clamp(2.4rem, 5vw, 4.2rem);

  --tb-lh-tight: 1.12;
  --tb-lh-snug: 1.35;
  --tb-lh-body: 1.6;
  --tb-tracking-tight: -0.04em;
  --tb-tracking-wide: 0.08em;
  --tb-fw-regular: 400;
  --tb-fw-medium: 500;
  --tb-fw-semibold: 600;
  --tb-fw-bold: 700;

  /* ——— Spacing (4px base) ——— */
  --tb-space-1: 0.25rem;
  --tb-space-2: 0.5rem;
  --tb-space-3: 0.75rem;
  --tb-space-4: 1rem;
  --tb-space-5: 1.25rem;
  --tb-space-6: 1.5rem;
  --tb-space-8: 2rem;
  --tb-space-10: 2.5rem;
  --tb-space-12: 3rem;
  --tb-space-16: 4rem;
  --tb-space-20: 5rem;

  /* ——— Breakpoints (design system) ———
   * sm  480px  — large phones
   * md  768px  — tablets
   * lg 1024px  — laptop / desktop nav + split hero
   * xl 1280px  — wide desktop
   */
  --tb-bp-sm: 480px;
  --tb-bp-md: 768px;
  --tb-bp-lg: 1024px;
  --tb-bp-xl: 1280px;
  --tb-touch: 44px;

  /* ——— Layout ——— */
  --tb-container: 1180px;
  --tb-gutter: 1.25rem;
  --tb-header: 4.5rem;
  --tb-section-y: clamp(3rem, 6vw, 5rem);

  /* ——— Radius ——— */
  --tb-radius-xs: 0.55rem;
  --tb-radius-sm: 1rem;
  --tb-radius-md: 1.25rem;
  --tb-radius-lg: 1.6rem;
  --tb-radius-xl: 2rem;
  --tb-radius: var(--tb-radius-xl);
  --tb-radius-pill: 999px;

  /* ——— Elevation ——— */
  --tb-shadow-sm: 0 8px 20px rgba(15, 36, 35, 0.08);
  --tb-shadow-md: 0 16px 34px rgba(15, 36, 35, 0.14);
  --tb-shadow-lg: 0 24px 60px rgba(15, 36, 35, 0.14);
  --tb-shadow: var(--tb-shadow-lg);
  --tb-shadow-gold: 0 10px 28px rgba(255, 199, 69, 0.35);

  /* ——— Motion ——— */
  --tb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tb-duration-fast: 150ms;
  --tb-duration: 250ms;
  --tb-duration-slow: 450ms;

  /* ——— Components · Button ——— */
  --tb-btn-height: 2.75rem;
  --tb-btn-height-lg: 3.15rem;
  --tb-btn-px: 1.15rem;
  --tb-btn-radius: var(--tb-radius-pill);

  /* ——— Components · Agent / Cloud UI ——— */
  --tb-agent-bg: rgba(255, 255, 255, 0.92);
  --tb-agent-bg-active: var(--tb-forest-700);
  --tb-terminal-bg: rgba(15, 36, 35, 0.94);
  --tb-terminal-fg: #9fd6c8;
  --tb-live: var(--tb-gold-500);
}

/* Dark product surfaces (dashboards / agent consoles) */
[data-theme="inverse"] {
  --tb-bg: var(--tb-forest-900);
  --tb-bg-elevated: var(--tb-forest-700);
  --tb-text: #ffffff;
  --tb-text-muted: rgba(255, 255, 255, 0.72);
  --tb-border: rgba(255, 255, 255, 0.12);
}