/* DevImprint Design Tokens
 * CSS custom properties — single source of truth for all visual decisions.
 * Import this first; never hardcode values that exist here.
 */

:root {
  /* ─── Color ─────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:            #0a0a0f;
  --color-surface-1:     #12121a;
  --color-surface-2:     #1a1a26;
  --color-surface-3:     #22223a;

  /* Borders */
  --color-border:        #2a2a3a;
  --color-border-subtle: #1e1e2e;

  /* Text */
  --color-text:          #e8e8f0;
  --color-text-dim:      #8888a0;
  --color-text-muted:    #5a5a70;

  /* Accent — primary green */
  --color-accent:        #4ade80;
  --color-accent-dark:   #22c55e;
  --color-accent-glow:   rgba(74, 222, 128, 0.10);
  --color-accent-border: rgba(74, 222, 128, 0.25);

  /* Semantic palette */
  --color-blue:          #60a5fa;
  --color-blue-dim:      #3b82f6;
  --color-amber:         #fbbf24;
  --color-amber-dim:     #f59e0b;
  --color-pink:          #f472b6;
  --color-purple:        #a78bfa;
  --color-red:           #f87171;
  --color-teal:          #2dd4bf;

  /* Rank change */
  --color-up:            var(--color-accent);
  --color-down:          var(--color-red);
  --color-neutral:       var(--color-text-muted);

  /* ─── Tool brand colors ──────────────────────────────────── */
  --tool-claude-code:    #CC785C;
  --tool-cursor:         #5589FF;
  --tool-copilot:        #9f6ee8;
  --tool-windsurf:       #00D2FF;
  --tool-aider:          #4ade80;
  --tool-codeium:        #09B6A2;

  /* ─── Typography ─────────────────────────────────────────── */
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* Type scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line heights */
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;

  /* ─── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ─── Border radius ──────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 20px rgba(74, 222, 128, 0.15);

  /* ─── Transitions ────────────────────────────────────────── */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max: 1200px;
  --nav-height:     60px;

  /* ─── Z-index ────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-toast:    500;
}