/* =========================================================================
   Taquion Design System — Color & Type tokens
   v2 — Dark mode, verde neon, cards pretos
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-0:    #050806;
  --bg-1:    #0a0f0c;
  --bg-2:    #0f1512;
  --bg-3:    #141b17;
  --bg-4:    #1b231e;
  --bg-5:    #222b25;

  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(34, 197, 94, 0.25);

  --fg-0:    #ffffff;
  --fg-1:    #e8ecea;
  --fg-2:    #a8b3ad;
  --fg-3:    #6b7771;
  --fg-4:    #4a5450;

  --green-50:  #e8fdf0;
  --green-100: #c5f9d5;
  --green-200: #8ff0ae;
  --green-300: #4ee084;
  --green-400: #22c55e;
  --green-500: #16a34a;
  --green-600: #15803d;
  --green-700: #14532d;
  --green-900: #052e16;

  --green-deep: #2f6a3a;
  --green-logo: #4a9a55;

  --grad-green:  #22c55e;
  --grad-teal:   #10b981;
  --grad-cyan:   #06b6d4;
  --grad-blue:   #3b82f6;
  --grad-purple: #8b5cf6;
  --grad-pink:   #d946ef;

  --gradient-hero: linear-gradient(90deg,
    #22c55e 0%, #10b981 20%, #06b6d4 40%,
    #3b82f6 60%, #8b5cf6 80%, #d946ef 100%);
  --gradient-btn: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
  --gradient-card-glow: radial-gradient(ellipse at top left,
    rgba(34, 197, 94, 0.08) 0%, transparent 60%);

  --todo-bg:     rgba(168, 179, 173, 0.08);
  --todo-fg:     #a8b3ad;
  --todo-dot:    #6b7771;

  --doing-bg:    rgba(34, 197, 94, 0.12);
  --doing-fg:    #4ee084;
  --doing-dot:   #22c55e;

  --done-bg:     rgba(16, 185, 129, 0.12);
  --done-fg:     #34d399;
  --done-dot:    #10b981;

  --blocked-bg:  rgba(244, 63, 94, 0.12);
  --blocked-fg:  #fb7185;
  --blocked-dot: #f43f5e;

  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #f43f5e;
  --info:    #3b82f6;

  --bg:        var(--bg-1);
  --bg-elev:   var(--bg-3);
  --bg-sunk:   var(--bg-0);
  --border:    var(--border-1);
  --border-strong: var(--border-2);
  --fg:        var(--fg-1);
  --fg-muted:  var(--fg-2);
  --fg-dim:    var(--fg-3);
  --accent:    var(--green-400);
  --accent-hover: var(--green-300);
  --accent-soft:  rgba(34, 197, 94, 0.12);
  --fg-on-accent: #052e16;

  --font-display: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-mega:  0.12em;

  --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-20: 80px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(34, 197, 94, 0.35), 0 0 40px rgba(34, 197, 94, 0.15);
  --shadow-glow-soft: 0 0 24px rgba(34, 197, 94, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gradient-text {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--green-400);
}