/* ============================================================
   iCrew Design System — Dark Mode Tokens
   Linear/Vercel-inspired palette
   ============================================================ */

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

:root {
  /* Background */
  --bg:             #0a0a0b;
  --bg-secondary:   #111113;

  /* Surfaces */
  --surface:        rgba(255, 255, 255, 0.03);
  --surface-hover:  rgba(255, 255, 255, 0.06);
  --surface-solid:  #1a1a1e;

  /* Text */
  --ink:            #ededed;
  --muted:          #94a3b8;  /* slate-400 — WCAG AA safe on all dark surfaces */
  --text:           var(--ink);
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);

  /* Type scale */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.25rem;
  --text-xl:        1.5rem;
  --text-2xl:       2rem;
  --text-hero:      clamp(1.75rem, 4vw, 2.5rem);

  /* Spacing */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;

  /* Accent — Teal */
  --accent:         #14b8a6;
  --accent-hover:   #2dd4bf;
  --accent-glow:    rgba(20, 184, 166, 0.15);

  /* Feedback */
  --success:        #22c55e;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #3b82f6;

  /* Borders */
  --border:         rgba(255, 255, 255, 0.08);
  --border-hover:   rgba(255, 255, 255, 0.15);

  /* Shape */
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      16px;
  --shadow:         0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);

  /* Legacy compat — old templates still reference these */
  --paper:          #111113;
  --accent-2:       #f59e0b;
  --line:           rgba(255, 255, 255, 0.08);
  --bg-start:       #0a0a0b;
  --bg-end:         #111113;
  --danger-text:    #ef4444;
}

/* Body base — WCAG readable line-height (UX-13) */
body {
  line-height: 1.5;
}

/* Keyboard focus visibility — WCAG 2.4.7 (UX-03) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Touch target optimization — eliminate 300ms tap delay (UX-10) */
button,
a {
  touch-action: manipulation;
}