/* ER Tech Design System — Core Tokens
 * Brand palette: pure black + white with a single signature coral-red accent.
 * UI type: Inter for shell/chrome, humanist stacks for task-reading surfaces.
 */

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

:root {
  /* Brand colors (raw) */
  --er-black:        #000000;
  --er-ink:          hsl(0 0% 5%);
  --er-ink-soft:     hsl(0 0% 15%);
  --er-white:        #ffffff;
  --er-off-white:    hsl(0 0% 98%);
  --er-secondary:    hsl(0 0% 96%);
  --er-muted:        hsl(0 0% 95%);
  --er-muted-fg:     hsl(0 0% 40%);
  --er-border:       hsl(0 0% 90%);

  --er-accent:       hsl(0 100% 71%);
  --er-accent-soft:  hsl(0 90% 65%);
  --er-accent-10:    hsl(0 100% 71% / 0.10);
  --er-accent-20:    hsl(0 100% 71% / 0.20);
  --er-accent-40:    hsl(0 100% 71% / 0.40);

  --er-destructive:  hsl(0 84.2% 60.2%);
  --er-success:      #10b981;

  /* Semantic */
  --background:           var(--er-white);
  --foreground:           var(--er-ink);
  --card:                 var(--er-white);
  --card-foreground:      var(--er-ink);
  --primary:              var(--er-ink);
  --primary-foreground:   var(--er-white);
  --secondary:            var(--er-secondary);
  --secondary-foreground: var(--er-ink);
  --muted:                var(--er-muted);
  --muted-foreground:     var(--er-muted-fg);
  --accent:               var(--er-accent);
  --accent-foreground:    var(--er-white);
  --border:               var(--er-border);
  --input:                var(--er-border);
  --ring:                 var(--er-ink);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(0 0% 5%), hsl(0 0% 15%));
  --gradient-accent:  linear-gradient(135deg, hsl(0 100% 71%), hsl(0 90% 65%));

  /* Shadows */
  --shadow-soft: 0 4px 20px -2px hsl(0 0% 0% / 0.10);
  --shadow-card: 0 8px 30px -4px hsl(0 0% 0% / 0.15);
  --shadow-glow: 0 0 40px hsl(0 100% 71% / 0.40);
  --shadow-sm:   0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-lg:   0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10);

  /* Motion */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.3s var(--ease-smooth);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.8s;

  /* Radii */
  --radius:     0.5rem;
  --radius-md:  calc(var(--radius) - 2px);
  --radius-sm:  calc(var(--radius) - 4px);
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing scale */
  --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;

  /* Typography */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-ui-lausanne: Lausanne, 'TWK Lausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui-ghost: Ghost, 'TWK Ghost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui-task: var(--font-ui-lausanne);
  --font-ui-crisp: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui-humanist: Aptos, Corbel, Candara, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:  72px;
  --fs-h1:       60px;
  --fs-h2:       48px;
  --fs-h3:       30px;
  --fs-h4:       24px;
  --fs-h5:       20px;
  --fs-lead:     20px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  border-radius: var(--radius);
}