// base/_reset.sass

@use '../abstracts' as *

// Global box-sizing and resets
*
  box-sizing: border-box

html
  font-size: 16px  // Base font size
  line-height: 1.5
  scroll-behavior: smooth
  background-color: $bg-dark  // Dark bg
  color: $text-light  // Light text

body
  margin: 0
  padding: 0
  font-family: $font-stack  // e.g., -apple-system, sans-serif
  background-color: $bg-dark
  color: $text-light
  min-height: 100vh

// Headings: Light, bold, with spacing
h1, h2, h3, h4, h5, h6
  margin: 0 0 0.5em
  font-weight: 600
  line-height: 1.2
  color: $accent-light

h1
  font-size: 2.5rem

h2
  font-size: 2rem

h3
  font-size: 1.75rem

h4
  font-size: 1.5rem

h5
  font-size: 1.25rem

h6
  font-size: 1rem

// Paragraphs and text
p
  margin: 0 0 1em

small
  font-size: 0.875rem

strong, b
  font-weight: 700

em, i
  font-style: italic

// Links: Light with hover underline
a
  color: $accent-light
  text-decoration: none
  border-bottom: 1px solid transparent
  transition: border-color 0.2s ease

  &:hover, &:focus
    border-bottom-color: $accent-light
    outline: none

// Lists
ul, ol
  margin: 0 0 1em
  padding-left: 1.5em

li
  margin-bottom: 0.25em

// Blockquote
blockquote
  margin: 1em 0
  padding: 0.5em 1em
  border-left: 4px solid $accent-light
  background-color: rgba($bg-dark, 0.5)
  color: $text-light

// Code and pre
code, kbd, samp
  font-family: $mono-font
  font-size: 0.875em
  background-color: rgba($text-light, 0.1)
  padding: 0.125em 0.25em
  border-radius: 3px

pre
  margin: 1em 0
  padding: 1em
  overflow: auto
  background-color: rgba($text-light, 0.1)
  border-radius: 4px
  code
    background: none
    padding: 0

// Tables
table
  width: 100%
  border-collapse: collapse
  margin: 1em 0

th, td
  padding: 0.75em
  text-align: left
  border-bottom: 1px solid rgba($text-light, 0.2)

th
  font-weight: 600

// Forms
input, select, textarea, button
  font-family: inherit
  font-size: inherit
  background-color: rgba($text-light, 0.1)
  color: $text-light
  border: 1px solid rgba($text-light, 0.3)
  border-radius: 4px
  padding: 0.5em

  &:focus
    outline: none
    border-color: $accent-light
    box-shadow: 0 0 0 2px rgba($accent-light, 0.2)

button
  cursor: pointer
  transition: background-color 0.2s ease

  &:disabled
    opacity: 0.5
    cursor: not-allowed

// Images and media
img
  max-width: 100%
  height: auto
  border-radius: 4px  // Optional subtle rounding

figure
  margin: 1em 0

// HR
hr
  border: none
  height: 1px
  background-color: rgba($text-light, 0.2)
  margin: 2em 0

// Accessibility: Focus visible for all interactive elements
*:focus-visible
  outline: 2px solid $accent-light
  outline-offset: 2px

// Print styles (optional)
@media print
  body
    background: white !important
    color: black !important

::selection
  background: rgba($accent-light, 0.3) // Subtle accent highlight for that terminal select vibe
  color: $text-light // Crisp text contrast

// Optional: Vendor prefixes for broader support (though modern browsers are solid)
*::-moz-selection
  background: rgba($accent-light, 0.3)
  color: $text-light