/* ==========================================================================
   DESIGN SYSTEM — BASE STYLES
   ==========================================================================

   Applies variables from globals.css to raw HTML elements.
   This ensures that even unstyled HTML looks on-brand.

   WHAT THIS FILE DOES:
   - Resets browser defaults to a clean, consistent baseline
   - Maps typography variables to heading and body elements
   - Sets default colors, spacing, and link behavior
   - Establishes the page-level foundation all channels inherit

   WHAT THIS FILE DOES NOT DO:
   - No component styles (buttons, cards, badges — those go in components.css)
   - No layout patterns (grids, stacks — those go in channel adapters)
   - No utility classes (those are optional and separate)

   IMPORT ORDER:
   1. globals.css  (variables)
   2. base.css     (this file)
   3. components.css
   4. [channel adapter].css

   ========================================================================== */



/* ==========================================================================
   1. RESET
   ==========================================================================
   Minimal reset — strips browser defaults without being destructive.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  list-style: none;
}


/* ==========================================================================
   2. DOCUMENT
   ==========================================================================
   Page-level defaults — background, base font, color.
   ========================================================================== */

html {
  font-size: 100%;
  /* 16px base — all rem values reference this */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-page);
}


/* ==========================================================================
   3. TYPOGRAPHY — HEADINGS
   ==========================================================================
   All headings use the display font domain.
   Sizes, weights, and line heights map to globals.css variables.
   Spacing between headings and content uses the spacing scale.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  text-wrap: balance;
  line-height: var(--leading-tight);
}


/* Display Title — larger than h1, for hero headlines and landing pages */
.display-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-lg);
}


h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-xs);
}

h3 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-xs);
}

h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
  letter-spacing: var(--tracking-wide);

}

h5 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--tracking-wide);
}

h6 {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--tracking-wide);
}


/* ==========================================================================
   4. TYPOGRAPHY — BODY TEXT
   ==========================================================================
   Paragraphs, lists, and inline elements use the body font domain.
   ========================================================================== */

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: var(--measure-default);
  margin-bottom: var(--space-md);
}



/* Lead paragraph — use class .lead for emphasis */
p.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Small text */
small,
.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Caption / fine print */
.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}

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

em,
i {
  font-style: italic;
}

.ui-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  display: block;
  font-weight: var(--weight-medium);
  margin-top: var(--space-md);
}

/* Inside flex rows, strip vertical margins so labels align properly */
.row .ui-label {
  margin: 0;
}

/* --- Text Size Utilities ---
   Direct access to each step in the type scale.
   Use on any element to override its default size.
*/
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* --- Font Weight Utilities ---
   Apply any weight from the scale to any element.
*/
.weight-light { font-weight: var(--weight-light); }
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }
.weight-extrabold { font-weight: var(--weight-extrabold); }

/* --- Line Height Utilities ---
   Control line height independently from font size.
*/
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* --- Letter Spacing Utilities ---
   Fine-tune character spacing for different contexts.
*/
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* ==========================================================================
   5. LINKS
   ========================================================================== */

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

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

a:focus-visible {
  outline: var(--border-default) solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   6. LISTS
   ========================================================================== */

/* Restore list styles when inside content areas */
.content ul,
.content ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.content ul {
  list-style-type: disc;
}

.content ol {
  list-style-type: decimal;
}

.content li {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-normal);
}

.content li::marker {
  color: var(--color-text-tertiary);
}


/* ==========================================================================
   7. HORIZONTAL RULE
   ========================================================================== */

hr {
  border: none;
  border-top: var(--border-thin) solid var(--color-border-default);
  margin: var(--space-2xl) 0;
}


/* ==========================================================================
   8. BLOCKQUOTE
   ========================================================================== */

blockquote {
  border-left: var(--border-thick) solid var(--color-primary);
  padding-left: var(--space-lg);
  margin: var(--space-lg) 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-tertiary);
}


/* ==========================================================================
   9. CODE
   ========================================================================== */

code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  font-size: 0.875em;
  /* Relative to parent — slightly smaller */
  background-color: var(--color-surface-sunken);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

pre {
  background-color: var(--color-surface-sunken);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   10. TABLES
   ========================================================================== */

table {
  width: 100%;
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

th {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-default) solid var(--color-border-strong);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-thin) solid var(--color-border-default);
  color: var(--color-text-secondary);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}


/* ==========================================================================
   11. FORMS — BARE DEFAULTS
   ==========================================================================
   Just enough to make unstyled inputs usable.
   Full form components belong in components.css.
   ========================================================================== */

label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xs);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-page);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-tertiary);
}

textarea {
  min-height: 6rem;
  resize: vertical;
}


/* ==========================================================================
   12. MEDIA
   ========================================================================== */

figure {
  margin-bottom: var(--space-lg);
}

figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-sm);
}


/* ==========================================================================
   13. SELECTION
   ========================================================================== */

::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* ==========================================================================
   14. PRINT
   ==========================================================================
   Basic print overrides — remove backgrounds, fix colors for paper.
   ========================================================================== */

@media print {
  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    color: black;
  }

  img,
  figure {
    page-break-inside: avoid;
  }

  pre,
  blockquote {
    page-break-inside: avoid;
    border-color: #999;
  }
}