/* =========================================================
   WebScope — Base Styles
   Purpose:
   - Normalize browser behavior
   - Define design tokens
   - Set typography and color system
   ========================================================= */

/* -----------------------------
   CSS Reset / Normalize
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* -----------------------------
   Root Variables (Design Tokens)
------------------------------ */
:root {
  /* Colors */
  --color-bg-primary: #0b0d12;
  --color-bg-secondary: #11131a;
  --color-bg-tertiary: #1a1d26;

  --color-text-primary: #eaeaf0;
  --color-text-secondary: rgba(234, 234, 240, 0.65);
  --color-text-muted: rgba(234, 234, 240, 0.45);

  --color-accent-blue: #38bdf8;
  --color-accent-indigo: #6366f1;
  --color-accent-green: #22c55e;
  --color-accent-yellow: #facc15;
  --color-accent-red: #ef4444;

  --color-border-soft: rgba(255, 255, 255, 0.08);
  --color-border-hard: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
               "Helvetica Neue", Arial, sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.55);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 420ms ease;
}

/* -----------------------------
   Base Body Styles
------------------------------ */
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  text-rendering: optimizeLegibility;
}

/* -----------------------------
   Typography Defaults
------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

p {
  color: var(--color-text-secondary);
}

strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* -----------------------------
   Links
------------------------------ */
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* -----------------------------
   Selection
------------------------------ */
::selection {
  background: rgba(99, 102, 241, 0.35);
}

/* -----------------------------
   Scrollbar (Subtle, Optional)
------------------------------ */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }
}

/* -----------------------------
   Reduced Motion Respect
------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}