/* ---- Base palette (light theme default) ---- */
:root {
  --color-primary: #2a6496;
  --color-accent:  #e8a838;
  --color-bg:      #f8f8f8;
  --color-surface: #ffffff;
  --color-text:    #222222;
  --color-muted:   #aaaaaa;

  --space-base: 8px;

  --transition-theme: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --color-primary: #5ba4d9;
  --color-accent:  #f0c060;
  --color-bg:      #111111;
  --color-surface: #1e1e1e;
  --color-text:    #f0f0f0;
  --color-muted:   #666666;
}

/* ---- Warm theme ---- */
:root[data-theme="warm"] {
  --color-primary: #b85c2a;
  --color-accent:  #d4a017;
  --color-bg:      #fdf6ec;
  --color-surface: #fff8f0;
  --color-text:    #3a2010;
  --color-muted:   #b09080;
}

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

body {
  margin: 0;
  font-family: monospace;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: var(--transition-theme);
}

/* ---- Nav ---- */
nav {
  font-family: monospace;
  font-size: 0.85em;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-muted);
}
nav a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* ---- Layout ---- */
main {
  max-width: 860px;
  margin: auto;
  padding: 40px 24px 80px;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--color-text);
}

h2 {
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--color-primary);
}

p { margin: 0 0 12px; color: var(--color-text); line-height: 1.6; }
p code { background: var(--color-surface); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }

.section {
  margin-top: 48px;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: 6px;
  transition: var(--transition-theme);
}

/* ---- Theme buttons ---- */
.theme-buttons {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.btn {
  font-family: monospace;
  font-size: 0.85rem;
  padding: 8px 20px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--color-primary); color: var(--color-surface); }
.btn.active { background: var(--color-primary); color: var(--color-surface); }

/* ---- Theme preview swatches ---- */
.theme-preview {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.preview-swatch {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 1px solid var(--color-muted);
  transition: var(--transition-theme);
}
.preview-swatch.primary     { background: var(--color-primary); }
.preview-swatch.accent      { background: var(--color-accent); }
.preview-swatch.bg          { background: var(--color-bg); }
.preview-swatch.text-color  { background: var(--color-text); }

/* ---- Palette grid ---- */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.palette-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.palette-item .swatch {
  height: 48px;
  border-radius: 4px;
  background: var(--swatch);
  border: 1px solid var(--color-muted);
  transition: var(--transition-theme);
}
.palette-item code { font-size: 0.72rem; color: var(--color-muted); }

/* ---- Spacing demo ---- */
.spacing-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.space-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.space-bar::before {
  content: '';
  display: block;
  height: 20px;
  width: calc(var(--space-base) * var(--n));
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
  transition: var(--transition-theme);
}
.space-bar span { font-size: 0.78rem; color: var(--color-muted); }

/* ---- Fluid typography ---- */
.fluid-type-demo { margin-top: 16px; }
.fluid-type-demo p { margin: 4px 0; line-height: 1.3; }

.fluid-xs  { font-size: calc(0.75rem  + 0.25vw); }
.fluid-sm  { font-size: calc(0.875rem + 0.35vw); }
.fluid-md  { font-size: calc(1rem     + 0.5vw);  }
.fluid-lg  { font-size: calc(1.25rem  + 0.75vw); }
.fluid-xl  { font-size: calc(1.5rem   + 1vw);    }
.fluid-2xl { font-size: calc(2rem     + 1.5vw);  }

/* ---- Component-scoped cards ---- */
.card-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.comp-card {
  flex: 1;
  min-width: 160px;
  border: 1px solid hsl(var(--card-hue), 40%, 60%);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  transition: var(--transition-theme);
}
.comp-card-header {
  background: hsl(var(--card-hue), 45%, 55%);
  color: #fff;
  padding: 10px 14px;
  font-size: 0.85rem;
}
.comp-card p {
  padding: 10px 14px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-muted);
}