/* ClaudeLab — Design tokens
   Basato sull'interfaccia Claude.ai (dark theme) */

:root {
  /* Brand Anthropic */
  --claude-orange: #d4a574;
  --claude-orange-bright: #e8895a;
  --claude-brand: #da7756;
  --claude-brand-dark: #c45f3e;
  --claude-brand-deep: #a85a3a;
  --claude-cream: #fffaf7;
  --claude-glow: rgba(218, 119, 86, 0.2);

  /* Surfaces Claude */
  --bg: #1a1a1a;
  --bg-elevated: #222222;
  --bg-surface: #2a2a2a;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);
  --bg-input: #2d2d2d;

  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.07);

  /* Text */
  --fg: #e8e6e3;
  --fg-muted: #9b9b9b;
  --fg-subtle: #666666;
  --fg-heading: #f0ede8;

  /* Accents */
  --accent-blue: #3b82f6;
  --accent-green: #22c55e;
  --accent-red: #ef4444;

  /* Sidebar */
  --sidebar-bg: #141414;
  --sidebar-width: 240px;
  --sidebar-collapsed: 52px;

  /* Modal */
  --modal-bg: #1e1e1e;
  --modal-border: rgba(255, 255, 255, 0.12);

  /* Font */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-ui: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Motion */
  --trans: 160ms ease;
  --trans-slow: 260ms ease;

  color-scheme: dark;
}