/**
 * Software Engineering / Tech Theme Tokens
 * Dark, analytical, high-velocity developer aesthetic.
 * All colors strictly defined in 10-shade HSL scales with darkest shade as original base (1000).
 */

:root {
  /* ==========================================================================
     1. Primary Color Scale - Deep Slate (Darkest shade 1000 = hsl(220, 35%, 7%))
     ========================================================================== */
  --clr-tech-primary-100: hsl(220, 35%, 95%);
  --clr-tech-primary-200: hsl(220, 35%, 85%);
  --clr-tech-primary-300: hsl(220, 35%, 72%);
  --clr-tech-primary-400: hsl(220, 35%, 58%);
  --clr-tech-primary-500: hsl(220, 35%, 45%);
  --clr-tech-primary-600: hsl(220, 35%, 32%);
  --clr-tech-primary-700: hsl(220, 35%, 22%);
  --clr-tech-primary-800: hsl(220, 35%, 15%);
  --clr-tech-primary-900: hsl(220, 35%, 10%);
  --clr-tech-primary-1000: hsl(220, 35%, 7%); /* Original Deep Slate Base */

  /* ==========================================================================
     2. Secondary Color Scale - Midnight Blue-Gray (Darkest shade 1000 = hsl(219, 37%, 14%))
     ========================================================================== */
  --clr-tech-secondary-100: hsl(219, 37%, 95%);
  --clr-tech-secondary-200: hsl(219, 37%, 85%);
  --clr-tech-secondary-300: hsl(219, 37%, 72%);
  --clr-tech-secondary-400: hsl(219, 37%, 58%);
  --clr-tech-secondary-500: hsl(219, 37%, 45%);
  --clr-tech-secondary-600: hsl(219, 37%, 34%);
  --clr-tech-secondary-700: hsl(219, 37%, 26%);
  --clr-tech-secondary-800: hsl(219, 37%, 20%);
  --clr-tech-secondary-900: hsl(219, 37%, 16%);
  --clr-tech-secondary-1000: hsl(219, 37%, 14%); /* Original Midnight Blue-Gray Base */

  /* ==========================================================================
     3. Accent Color Scale - Electric Cyan / Ice Blue (Darkest shade 1000 = hsl(198, 93%, 20%))
     ========================================================================== */
  --clr-tech-accent-100: hsl(198, 93%, 95%);
  --clr-tech-accent-200: hsl(198, 93%, 85%);
  --clr-tech-accent-300: hsl(198, 93%, 75%);
  --clr-tech-accent-400: hsl(198, 93%, 68%);
  --clr-tech-accent-500: hsl(198, 93%, 60%); /* Vibrant High-Contrast Cyan Action */
  --clr-tech-accent-600: hsl(198, 93%, 50%);
  --clr-tech-accent-700: hsl(198, 93%, 40%);
  --clr-tech-accent-800: hsl(198, 93%, 32%);
  --clr-tech-accent-900: hsl(198, 93%, 25%);
  --clr-tech-accent-1000: hsl(198, 93%, 20%); /* Darkest Accent */

  /* ==========================================================================
     4. Grey Scale - Precision Slate (Darkest shade 1000 = hsl(215, 25%, 8%))
     ========================================================================== */
  --clr-tech-grey-100: hsl(215, 20%, 88%); /* Crisp, Clear Body Text (High Legibility) */
  --clr-tech-grey-200: hsl(215, 18%, 82%);
  --clr-tech-grey-300: hsl(215, 16%, 76%); /* Clear, Legible Secondary Text */
  --clr-tech-grey-400: hsl(215, 15%, 70%); /* Supporting Text */
  --clr-tech-grey-500: hsl(215, 16%, 58%);
  --clr-tech-grey-600: hsl(215, 18%, 45%);
  --clr-tech-grey-700: hsl(215, 20%, 32%);
  --clr-tech-grey-800: hsl(215, 22%, 22%);
  --clr-tech-grey-900: hsl(215, 24%, 14%);
  --clr-tech-grey-1000: hsl(215, 25%, 8%); /* Deep Charcoal Border/Bg */

  /* ==========================================================================
     5. Semantic Colors - 10 Shades each (Darkest = 1000)
     ========================================================================== */
  /* Red (Error/Danger) */
  --clr-tech-red-100: hsl(0, 80%, 95%);
  --clr-tech-red-200: hsl(0, 80%, 85%);
  --clr-tech-red-300: hsl(0, 80%, 75%);
  --clr-tech-red-400: hsl(0, 80%, 65%);
  --clr-tech-red-500: hsl(0, 80%, 55%);
  --clr-tech-red-600: hsl(0, 80%, 45%);
  --clr-tech-red-700: hsl(0, 80%, 35%);
  --clr-tech-red-800: hsl(0, 80%, 25%);
  --clr-tech-red-900: hsl(0, 80%, 15%);
  --clr-tech-red-1000: hsl(0, 80%, 8%);

  /* Yellow (Warning) */
  --clr-tech-yellow-100: hsl(42, 95%, 95%);
  --clr-tech-yellow-200: hsl(42, 95%, 85%);
  --clr-tech-yellow-300: hsl(42, 95%, 75%);
  --clr-tech-yellow-400: hsl(42, 95%, 65%);
  --clr-tech-yellow-500: hsl(42, 95%, 52%);
  --clr-tech-yellow-600: hsl(42, 95%, 42%);
  --clr-tech-yellow-700: hsl(42, 95%, 32%);
  --clr-tech-yellow-800: hsl(42, 95%, 22%);
  --clr-tech-yellow-900: hsl(42, 95%, 14%);
  --clr-tech-yellow-1000: hsl(42, 95%, 8%);

  /* Green (Success) */
  --clr-tech-green-100: hsl(150, 75%, 95%);
  --clr-tech-green-200: hsl(150, 75%, 85%);
  --clr-tech-green-300: hsl(150, 75%, 75%);
  --clr-tech-green-400: hsl(150, 75%, 65%);
  --clr-tech-green-500: hsl(150, 75%, 48%);
  --clr-tech-green-600: hsl(150, 75%, 38%);
  --clr-tech-green-700: hsl(150, 75%, 28%);
  --clr-tech-green-800: hsl(150, 75%, 20%);
  --clr-tech-green-900: hsl(150, 75%, 12%);
  --clr-tech-green-1000: hsl(150, 75%, 6%);

  /* ==========================================================================
     6. Typography Pairing - "The Engineered Editorial Stack"
     ========================================================================== */
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ==========================================================================
     7. Scoped Component Tokens
     ========================================================================== */
  --bg-main: var(--clr-tech-primary-1000); /* Deep Slate #0B0F17 */
  --bg-surface: var(--clr-tech-secondary-1000); /* Midnight Blue-Gray #161F30 */
  --bg-surface-elevated: hsl(219, 37%, 18%);
  --bg-input: hsl(220, 35%, 10%);

  --text-heading: hsl(215, 18%, 84%); /* Glare-Free Soft Newsreader Tone */
  --text-primary: var(--clr-tech-grey-100); /* hsl(215, 20%, 88%) Crisp, Clear Body Text */
  --text-secondary: var(--clr-tech-grey-300); /* hsl(215, 16%, 76%) Easily Readable Secondary Text */
  --text-muted: hsl(215, 14%, 60%);

  --accent-main: var(--clr-tech-accent-500); /* Electric Cyan */
  --accent-hover: var(--clr-tech-accent-400);
  --accent-glow: hsl(198, 93%, 60%, 0.25);

  --border-main: hsl(219, 30%, 20%);
  --border-subtle: hsl(219, 30%, 14%);
  --border-focus: var(--clr-tech-accent-500);

  /* Dark Badges & Chips (Darker BG, Lighter Text) */
  --badge-bg: hsl(219, 37%, 10%);
  --badge-text: var(--clr-tech-accent-300);
  --badge-border: hsl(198, 93%, 60%, 0.3);

  /* Form & Interactive Controls */
  --input-bg: hsl(220, 35%, 10%);
  --input-border: hsl(219, 30%, 22%);
  --modal-bg: var(--clr-tech-secondary-1000);

  /* Semantic Direct Mapping */
  --semantic-red-base: var(--clr-tech-red-500);
  --semantic-yellow-base: var(--clr-tech-yellow-500);
  --semantic-green-base: var(--clr-tech-green-500);

  /* Custom Cursor Color */
  --cursor-color: var(--clr-tech-accent-500);
  --cursor-hover-color: var(--clr-tech-accent-300);
}

/* Base Body Application */
body.tech-theme {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* High-Legibility Paragraphs - Easy on Eyes Without Squinting */
body.tech-theme p {
  color: var(--text-primary);
  line-height: 1.75;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* Headings & Main Labels use Newsreader (Optical Serif) */
body.tech-theme h1,
body.tech-theme h2,
body.tech-theme h3,
body.tech-theme h4,
body.tech-theme h5,
body.tech-theme h6,
body.tech-theme label,
body.tech-theme .heading-font {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text-heading);
  text-shadow: none;
}

/* Bold / Strong emphasis matches heading tone */
body.tech-theme strong,
body.tech-theme b {
  color: var(--text-heading);
  font-weight: 600;
}

/* List Bullets and Numbers match theme */
body.tech-theme ul {
  list-style-type: square;
  color: var(--accent-main);
}
body.tech-theme ul li span {
  color: var(--text-primary);
}

body.tech-theme ol {
  color: var(--accent-main);
}
body.tech-theme ol li span {
  color: var(--text-primary);
}

/* Custom Scrollbar matching Tech theme */
body.tech-theme::-webkit-scrollbar {
  width: 10px;
}
body.tech-theme::-webkit-scrollbar-track {
  background: var(--bg-main);
}
body.tech-theme::-webkit-scrollbar-thumb {
  background: hsl(219, 30%, 22%);
  border-radius: var(--radius-full);
}
body.tech-theme::-webkit-scrollbar-thumb:hover {
  background: var(--accent-main);
}

/* Highlight / Selection color */
body.tech-theme ::selection {
  background-color: hsl(198, 93%, 60%, 0.35);
  color: var(--text-primary);
}

/* Blinking text cursor */
body.tech-theme input,
body.tech-theme textarea {
  caret-color: var(--accent-main);
}

/* Form checkboxes and radio buttons match theme */
body.tech-theme input[type="checkbox"],
body.tech-theme input[type="radio"] {
  accent-color: var(--accent-main);
}