/* Aednan — delad kärn-CSS för alla varumärken.
   Innehåller struktur, spacing och komponentmönster.
   Färger och typsnitt kommer från varje varumärkes eget theme-*.css (CSS custom properties). */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius: 2px;
  --radius-pill: 100px;
  --max-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-8); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.eyebrow { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-5); }

/* Buttons */
.btn { border: none; padding: 12px 22px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; border-radius: var(--radius); cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--border); font-weight: 500; }
.btn-ghost { background: transparent; color: var(--muted); font-weight: 500; }

.badge { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--accent); }

/* Tabs */
.tabs { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; gap: 4px; }
.tab { padding: 8px 16px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--muted); border-radius: var(--radius); }
.tab.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Checkbox */
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 14px; color: var(--ink); cursor: pointer; }
.checkbox-row .box { width: 18px; height: 18px; border-radius: 3px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 12px; }

/* Inputs */
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); }
.field input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 11px 14px; font-family: var(--font-ui); font-size: 14px; border-radius: var(--radius); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
.card-title { font-family: var(--font-display); font-size: 17px; margin-bottom: var(--space-1); }
.card-meta { font-size: 13px; color: var(--muted); }

/* Alert / notice */
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; font-family: var(--font-ui); font-size: 14px; color: var(--ink); }

/* Progress */
.progress-label { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); }
.progress-track { height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); }

/* UI panel wrapper */
.ui-panel { background: var(--surface); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }