/* ============================================================
   BASE.CSS — PERSONAL_OS Design System
   Reset, CSS Variables, Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  --color-bg:          #F0EDE8;
  --color-bg-card:     #ECEAE5;
  --color-surface:     #E4E1DB;
  --color-text:        #0D0D0D;
  --color-text-muted:  #6B6860;
  --color-accent:      #C41E1E;
  --color-accent-dim:  #8B1515;
  --color-system:      #C41E1E;
  --color-white:       #FFFFFF;

  --sidebar-width:     200px;

  --text-hero:   clamp(64px, 10vw, 120px);
  --text-h1:     clamp(36px, 5vw, 72px);
  --text-h2:     32px;
  --text-h3:     22px;
  --text-body:   16px;
  --text-small:  13px;
  --text-label:  11px;

  --font-display:    'Bebas Neue', sans-serif;
  --font-heading:    'Barlow Condensed', sans-serif;
  --font-body:       'IBM Plex Sans', sans-serif;
  --font-mono:       'IBM Plex Mono', monospace;

  --transition-border: border-color 150ms ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--color-text);
  margin: 0;
}

/* ── Typography ─────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 0.95;
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.t-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.t-label--accent {
  color: var(--color-accent);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

/* ── Utility ────────────────────────────────────────────── */
.color-muted  { color: var(--color-text-muted); }
.color-accent { color: var(--color-accent); }
.color-white  { color: var(--color-white); }

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