/* ========================================
   ASCII NEWS DESIGN SYSTEM
   Based on brand-guide.md specifications
   ======================================== */

/* Color System */
:root {
  /* Light Mode - Base Palette */
  --color-bg-primary: #FAFAFA;
  --color-bg-card: #FFFFFF;
  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-border: #E8E8E8;

  /* Accent Colors */
  --color-ascii-green: #00FF41;
  --color-soft-blue: #4DC3FF;

  /* Shadows */
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.06);

  /* Spacing (4pt system) */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 28px;
  --radius-xxl: 40px;

  /* Typography Sizes */
  --font-size-headline: 48px;
  --font-size-tldr: 24px;
  --font-size-body: 18px;
  --font-size-tag: 14px;
  --font-size-nav: 16px;
  --font-size-metadata: 14px;

  /* Typography Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg-primary: #0E1011;
  --color-bg-card: #141617;
  --color-text-primary: #F2F2F2;
  --color-text-secondary: #A7A7A7;
  --color-border: #1D1F20;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.4);
}

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

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Space+Grotesk:wght@700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Classes */
.headline {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-m) 0;
}

.tldr {
  font-size: var(--font-size-tldr);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-l) 0;
}

.body-text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.metadata {
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.logo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  font-size: 20px;
}

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

/* Spacing Utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }

.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

/* Text Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-ascii-green); }

/* Background Utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-card { background-color: var(--color-bg-card); }

/* ========================================
   COMPONENT CLASSES
   ======================================== */

/* Tag Pills */
.tag-pill {
  display: inline-block;
  padding: var(--space-xs) var(--space-m);
  background-color: rgba(0, 255, 65, 0.08);
  color: var(--color-ascii-green);
  border-radius: var(--radius-xxl);
  font-size: var(--font-size-tag);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-s);
  margin-bottom: var(--space-s);
  transition: all var(--transition-fast);
}

.tag-pill:hover {
  background-color: rgba(0, 255, 65, 0.12);
  transform: translateY(-1px);
}

[data-theme="dark"] .tag-pill {
  background-color: rgba(0, 255, 65, 0.12);
}

[data-theme="dark"] .tag-pill:hover {
  background-color: rgba(0, 255, 65, 0.18);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m) var(--space-xl);
  border: none;
  border-radius: var(--radius-m);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  font-family: inherit;
}

.btn-primary {
  background-color: var(--color-ascii-green);
  color: #000;
}

.btn-primary:hover {
  background-color: #00DD38;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 255, 65, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-bg-card);
  transform: translateY(-1px);
}

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

@media (max-width: 768px) {
  :root {
    --font-size-headline: 36px;
    --font-size-tldr: 22px;
    --font-size-body: 17px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-headline: 32px;
    --font-size-tldr: 20px;
  }
}