/* ============================================================
   filo.bot — design tokens
   Linear-inspired, near-black canvas + emerald accent.
   The single source of truth for the visual language across web,
   TMA, and (future) native Capacitor wrappers. Imported via
   `@import '@copier/ui-tokens/tokens.css';` in each consumer's
   global stylesheet.
   ============================================================ */

:root {
  /* Brand & accent — emerald */
  --primary:         #34d399;
  --primary-hover:   #6ee7b7;
  --primary-focus:   #10b981;
  --primary-tint:    rgba(52, 211, 153, 0.12);
  --primary-tint-strong: rgba(52, 211, 153, 0.22);

  /* Surface ladder */
  --canvas:          #010102;
  --surface-1:       #0f1011;
  --surface-2:       #141516;
  --surface-3:       #18191a;
  --surface-4:       #1d1e1f;

  /* Hairlines */
  --hairline:        #23252a;
  --hairline-strong: #34343a;
  --hairline-ter:    #3e3e44;

  /* Text */
  --ink:             #f7f8f8;
  --ink-muted:       #d0d6e0;
  --ink-subtle:      #8a8f98;
  --ink-ter:         #62666d;

  /* Semantic */
  --success:         #34d399;
  --success-dim:     rgba(52, 211, 153, 0.12);
  --danger:          #f87171;
  --danger-dim:      rgba(248, 113, 113, 0.12);
  --warn:            #fbbf24;
  --warn-dim:        rgba(251, 191, 36, 0.12);
  --info:            #60a5fa;
  --info-dim:        rgba(96, 165, 250, 0.12);

  /* Typography stacks */
  --font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 9999px;

  /* Spacing helpers (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Shadows — used sparingly on dropdowns/modals only */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.7);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 100ms;
  --t-base: 160ms;
  --t-slow: 240ms;

  /* Legacy aliases (older inline page styles) */
  --bg-0:           var(--canvas);
  --bg-1:           var(--surface-1);
  --bg-2:           var(--surface-2);
  --bg-3:           var(--surface-3);
  --border:         var(--hairline);
  --border-hover:   var(--hairline-strong);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-muted);
  --text-muted:     var(--ink-subtle);
  --green:          var(--success);
  --green-dim:      var(--success-dim);
  --red:            var(--danger);
  --red-dim:        var(--danger-dim);
  --yellow:         var(--warn);
  --yellow-dim:     var(--warn-dim);
  --blue:           var(--info);
  --blue-dim:       var(--info-dim);
  --accent:         var(--primary);
  --accent-hover:   var(--primary-hover);
  --radius:         var(--r-md);
  --radius-lg:      var(--r-lg);
}