/* =============================================================
   ADDA Website v1 -- Global Styles
   Project: ADDA Website v1 (sandbox)
   File: css/global.css
   Purpose: Lightweight reset and base element styles.
            Imports tokens. Does not contain layout or
            component styles. Sets the accessible baseline
            for all pages.
   Status: Sandbox only. Do not deploy to production.
   ============================================================= */

@import "./tokens.css";

/* --- Reduced motion support --- */

@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;
  }
}

/* --- Box sizing --- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Root and body --- */

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:  var(--font-family-base);
  font-size:    var(--font-size-base);
  font-weight:  var(--font-weight-normal);
  line-height:  var(--line-height-base);
  color:        var(--color-text-body);
  background-color: var(--color-bg-page);
  min-height:   100vh;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-family-heading);
  font-weight:  var(--font-weight-bold);
  line-height:  var(--line-height-tight);
  color:        var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  }
h6 { font-size: var(--font-size-base); }

/* --- Paragraphs and text --- */

p {
  max-width:    68ch;
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm);
}

/* --- Links --- */

a {
  color:            var(--color-link);
  text-decoration:  underline;
  text-underline-offset: 3px;
  transition:       color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  color: var(--color-blue-deep);
}

/* --- Focus styles -- visible for all interactive elements --- */

:focus-visible {
  outline:        var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius:  var(--border-radius-sm);
}

/* Remove default focus ring only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Buttons --- */

button {
  font-family:  inherit;
  font-size:    inherit;
  cursor:       pointer;
  border:       none;
  background:   none;
}

/* --- Lists --- */

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-2);
}

/* --- Images --- */

img {
  max-width:  100%;
  height:     auto;
  display:    block;
}

img[alt=""] {
  /* Decorative images should have empty alt, this is intentional */
}

/* --- Horizontal rule --- */

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

/* --- Tables --- */

table {
  width:            100%;
  border-collapse:  collapse;
  font-size:        var(--font-size-sm);
}

th, td {
  padding:      var(--space-3) var(--space-4);
  text-align:   left;
  border-bottom: var(--border-width) solid var(--color-border);
}

th {
  font-weight:      var(--font-weight-semibold);
  background-color: var(--color-blue-light);
  color:            var(--color-text-primary);
}

/* --- Forms (base only -- component styles in layout.css) --- */

input,
textarea,
select {
  font-family:  inherit;
  font-size:    var(--font-size-base);
  color:        var(--color-text-primary);
}

label {
  font-weight:  var(--font-weight-medium);
  font-size:    var(--font-size-sm);
  color:        var(--color-text-primary);
}

/* --- Utility: visually hidden (for screen reader text) --- */

.sr-only {
  position:     absolute;
  width:        1px;
  height:       1px;
  padding:      0;
  margin:       -1px;
  overflow:     hidden;
  clip:         rect(0, 0, 0, 0);
  white-space:  nowrap;
  border:       0;
}

/* --- Utility: focusable visually hidden (for skip links) --- */

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position:   static;
  width:      auto;
  height:     auto;
  padding:    inherit;
  margin:     inherit;
  overflow:   visible;
  clip:       auto;
  white-space: normal;
}

/* =============================================================
   HEADING REFINEMENTS FOR LORA SERIF
   Lora is a warm, readable serif. These adjustments ensure
   headings feel elegant and well-spaced at every size.
   Applied globally so all pages benefit automatically.
   ============================================================= */

h1 {
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
}

h2 {
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

h3 {
  font-weight:    var(--font-weight-semibold);
  letter-spacing: 0;
}

h4, h5, h6 {
  font-weight:    var(--font-weight-medium);
  letter-spacing: 0;
}