/* ============================================
   DNS History - Design Token System 2026
   Palette: Deep Space Intelligence
   Display: Space Grotesk / Body: Inter
   Signature: Animated timeline pulse line
   ============================================ */

:root {
  /* Color Palette */
  --c-bg:          #0D0F14;   /* deep space black */
  --c-surface:     #141720;   /* card surface */
  --c-surface-2:   #1C2030;   /* elevated surface */
  --c-border:      #252B3B;   /* subtle border */
  --c-border-2:    #323A52;   /* interactive border */

  --c-pulse:       #00E5A0;   /* signature: teal pulse */
  --c-pulse-dim:   rgba(0, 229, 160, 0.12);
  --c-pulse-glow:  rgba(0, 229, 160, 0.25);

  --c-accent:      #4F8EF7;   /* blue for record types */
  --c-accent-dim:  rgba(79, 142, 247, 0.12);

  --c-warn:        #F59E0B;   /* warning amber */
  --c-error:       #EF4444;   /* error red */

  --c-text:        #E8EBF2;   /* primary text */
  --c-text-2:      #8892AA;   /* secondary text */
  --c-text-3:      #4F5A70;   /* muted text */

  /* Typography */
  --font-display:  'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-pulse: 0 0 20px var(--c-pulse-glow);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* Layout */
  --max-w:       1200px;
  --header-h:    64px;
}