// components/_ui.sass

@use '../abstracts' as *
@use '../base' as *

// Code blocks: Monospace lock-in with darker green tint
code
  font-family: 'VT323', $mono-font  // Prioritize Matrix font
  font-size: 0.875rem  // Smaller for inline; reset has base
  background-color: color('bg-darker')  // Deeper green-black
  color: $text-light  // Lighter green text
  padding: space('xs') space('sm')
  border-radius: 4px
  border: 1px solid color('border-light')
  box-shadow: 0 0 2px rgba($accent-light, 0.1)  // Subtle glow

// Utility: Small text (if still needed; consider rem-based)
.small
  font-size: 0.625rem  // 10px equiv; use sparingly

// Error/notice divs: Centered alerts with theme colors
div.error, div.notice, div#debug
  margin: space('xl') auto  // Top/bottom spacing from map
  width: 900px  // Fixed width; add media query for mobile later
  padding: space('lg')  // Generous padding
  border-radius: 6px
  border: 1px solid

div.error
  background-color: rgba(color('accent-error'), 0.1)  // Subtle red tint
  color: color('accent-error')  // Darker red text
  border-color: color('accent-error')

div.notice
  background-color: rgba(color('accent-success'), 0.1)  // Green tint
  color: color('accent-success')  // Heavier green text
  border-color: color('accent-success')

div#debug
  background-color: color('bg-darker')  // Deeper bg for debug
  color: $text-muted  // Muted green
  border-color: color('border-light')
  margin-top: space('2xl')
  margin-bottom: space('2xl')

// Tables: Simplified; reset handles collapse/padding
.pages-table
  width: 100%
  border: 1px solid color('border-light')  // Green border

  th, td
    border: 1px solid color('border-light')
    text-align: left

  th
    background-color: rgba($accent-light, 0.05)  // Subtle accent bg
    color: $text-lighter  // Header green
    font-weight: 600  // Semi-bold; no bold in monospace