/**
 * Base Styles - drep-ai.org
 *
 * Modern CSS reset + semantic HTML base styles
 * Mobile-first, progressive enhancement, WCAG AA compliant
 *
 * Load order: tokens.css → base.css → components.css → main.css
 */

/* ============================================
   MODERN CSS RESET
   Based on Andy Bell's modern CSS reset
   ============================================ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height-normal);
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Improve readability of paragraphs */
p {
  text-wrap: pretty;
  max-width: 70ch; /* Optimal line length for readability */
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--color-primary);
  text-decoration: underline;
}

a:not([class]):hover {
  color: var(--color-primary-dark);
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Ensure textarea doesn't overflow */
textarea {
  resize: vertical;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-hero);
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-5);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Lead paragraph (intro text) */
.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

/* Small text */
small {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* Strong and emphasis */
strong, b {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

em, i {
  font-style: italic;
}

/* Code */
code,
kbd,
samp,
pre {
  font-family: var(--font-code);
  font-size: 0.9em;
}

code {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

pre {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  line-height: var(--line-height-normal);
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-weight: var(--font-weight-normal);
}

/* Keyboard input */
kbd {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* Blockquote */
blockquote {
  border-left: var(--border-width-thick) solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

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

/* Horizontal rule */
hr {
  border: none;
  border-top: var(--border-width-thin) solid var(--color-border-base);
  margin: var(--space-8) 0;
}


/* ============================================
   LISTS
   ============================================ */

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

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Nested lists */
li > ul,
li > ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}


/* ============================================
   LINKS
   ============================================ */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--color-primary-dark);
}

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

/* External link indicator (optional) */
a[target="_blank"]::after {
  /* Uncomment to add external link icon
  content: " ↗";
  font-size: 0.8em;
  */
}


/* ============================================
   FORMS (minimal base styles)
   ============================================ */

input,
textarea,
select {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--color-border-base);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  transition: var(--transition-colors);
}

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

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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


/* ============================================
   TABLES (minimal base styles)
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

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

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

td {
  color: var(--color-text-secondary);
}

tr:hover {
  background-color: var(--color-bg-base);
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Skip to main content link (for keyboard users) */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-main:focus {
  top: 0;
}

/* Screen reader only 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;
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: var(--border-width-medium) solid var(--color-border-focus);
  outline-offset: 2px;
}


/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Container - max-width wrapper for content */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 48rem) { /* 768px - tablet */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 64rem) { /* 1024px - desktop */
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Section spacing */
section {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

@media (min-width: 48rem) { /* 768px - tablet */
  section {
    padding-top: var(--space-section-md);
    padding-bottom: var(--space-section-md);
  }
}

@media (min-width: 64rem) { /* 1024px - desktop */
  section {
    padding-top: var(--space-section-lg);
    padding-bottom: var(--space-section-lg);
  }
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* Visibility (for screen readers vs visual) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  padding: var(--space-section-lg) 0;
}

.hero__logo {
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto var(--space-8);
}