/* =====================================================================
   SVEDEMO COGNITIVE — Design System
   Shared tokens, base styles & components
   ===================================================================== */

/* Fonter laddas från fonts.css — self-hostade, se index.html. */

:root {
  /* ---- Brand core ---- */
  --navy:  #0C182F;
  --teal:  #067A8C;
  --steel: #4A8FA8;
  --ice:   #D4EBF0;
  --slate: #64748B;
  --cloud: #F4F7FB;

  /* ---- Neutral scale (cool) ---- */
  --n-0:   #FFFFFF;
  --n-50:  #F4F7FB;
  --n-100: #E9EFF5;
  --n-200: #D0DCE8;
  --n-300: #B4C5D6;
  --n-400: #8497AC;
  --n-500: #64748B;
  --n-600: #4A5A6E;
  --n-700: #344256;
  --n-800: #1E2A40;
  --n-900: #0C182F;

  /* ---- Teal scale ---- */
  --teal-50:  #E6F3F5;
  --teal-100: #D4EBF0;
  --teal-200: #9FD2DB;
  --teal-300: #5FB1BE;
  --teal-400: #2A95A4;
  --teal-500: #067A8C;
  --teal-600: #056475;
  --teal-700: #044E5B;

  /* ---- Functional / status ---- */
  --success:    #1F8A5B;
  --success-bg: #E4F2EB;
  --warning:    #B5841A;
  --warning-bg: #F7EFDA;
  --danger:     #C0453E;
  --danger-bg:  #F8E7E5;
  --info:       #4A8FA8;
  --info-bg:    #E4EEF3;

  /* ---- Semantic ---- */
  --bg:           var(--cloud);
  --bg-elevated:  var(--n-0);
  --text:         var(--navy);
  --text-muted:   var(--slate);
  --text-faint:   var(--n-400);
  --border:       var(--n-200);
  --border-strong:var(--n-300);
  --accent:       var(--teal);
  --on-accent:    #FFFFFF;

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* type scale */
  --fs-display: clamp(2.6rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 3.5vw, 2.75rem);
  --fs-h2: 1.875rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.72rem;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-sm: 0 1px 2px rgba(12,24,47,.06), 0 1px 1px rgba(12,24,47,.04);
  --sh-md: 0 4px 14px rgba(12,24,47,.08);
  --sh-lg: 0 14px 38px rgba(12,24,47,.13);
  --sh-focus: 0 0 0 3px rgba(6,122,140,.30);

  --maxw: 1180px;
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--teal); color: #fff; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--navy); letter-spacing: -0.01em; }
p { text-wrap: pretty; }

.font-display { font-family: var(--font-display); }
.font-ui { font-family: var(--font-ui); }
.font-mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
}

/* =====================================================================
   LAYOUT HELPERS
   ===================================================================== */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-8); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* =====================================================================
   SITE CHROME (shared across DS pages)
   ===================================================================== */
.ds-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.ds-topbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-3) var(--sp-8);
}
.ds-topbar img { height: 30px; width: auto; }
.ds-nav { display: flex; gap: var(--sp-1); margin-left: auto; flex-wrap: wrap; }
.ds-nav a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  transition: color .15s, background .15s;
}
.ds-nav a:hover { color: var(--navy); background: var(--n-100); }
.ds-nav a.active { color: var(--teal); background: var(--teal-50); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .01em; line-height: 1;
  padding: 13px 22px; border-radius: var(--r-md);
  border: 1px solid transparent; background: var(--navy); color: #fff;
  transition: transform .12s ease, background .15s, box-shadow .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }

.btn--primary { background: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(6,122,140,.25); }
.btn--primary:hover { background: var(--teal-600); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--n-800); }
.btn--secondary { background: #fff; color: var(--navy); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-50); }
.btn--ghost { background: transparent; color: var(--teal); }
.btn--ghost:hover { background: var(--teal-50); }
.btn--sm { padding: 9px 15px; font-size: var(--fs-xs); }
.btn--lg { padding: 16px 30px; font-size: var(--fs-body); }
.btn[disabled], .btn--disabled { opacity: .45; pointer-events: none; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal); font-weight: 600; font-size: var(--fs-sm);
}
.link-arrow .arrow { transition: transform .15s; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   FORMS
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.label .req { color: var(--danger); }
.hint { font-size: var(--fs-xs); color: var(--text-muted); }
.input, .textarea, .select {
  font-family: var(--font-ui); font-size: var(--fs-body); color: var(--navy);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 11px 14px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.textarea { resize: vertical; min-height: 96px; }
.input::placeholder, .textarea::placeholder { color: var(--n-400); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--teal); box-shadow: var(--sh-focus); }
.input--error { border-color: var(--danger); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(192,69,62,.22); }
.field-error { font-size: var(--fs-xs); color: var(--danger); font-weight: 500; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }

.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--n-300); border-radius: var(--r-pill); transition: background .2s; }
.switch .track::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: var(--sh-sm); }
.switch input:checked + .track { background: var(--teal); }
.switch input:checked + .track::before { transform: translateX(20px); }

/* =====================================================================
   CARDS & PANELS
   ===================================================================== */
.card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--teal-200); }
.card--accent { border-top: 3px solid var(--teal); }
.card--dark { background: var(--navy); color: #fff; border-color: transparent; }
.card--dark h1,.card--dark h2,.card--dark h3,.card--dark h4 { color: #fff; }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--teal-50); color: var(--teal);
  margin-bottom: var(--sp-4);
}
.card__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--teal); font-weight: 500; }

.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); }

/* =====================================================================
   BADGES / TAGS
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .02em; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--n-100); color: var(--n-700); line-height: 1.4;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--teal { background: var(--teal-50); color: var(--teal-700); }
.badge--navy { background: var(--navy); color: #fff; }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--border); color: var(--n-700);
}

/* =====================================================================
   TABLE
   ===================================================================== */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl thead th {
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  font-weight: 500; padding: 13px 18px; background: var(--n-50); border-bottom: 1px solid var(--border);
}
.tbl tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border); color: var(--navy); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--n-50); }
.tbl .num { text-align: right; font-family: var(--font-mono); }

/* =====================================================================
   QUOTE / TESTIMONIAL
   ===================================================================== */
.quote { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); position: relative; }
.quote__mark { font-family: var(--font-display); font-size: 4.5rem; line-height: .5; color: var(--ice); position: absolute; top: 26px; left: 24px; }
.quote__text { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.5; color: var(--navy); position: relative; }
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: var(--sp-6); }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; }
.quote__name { font-weight: 600; color: var(--navy); font-size: var(--fs-sm); }
.quote__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* =====================================================================
   UTIL
   ===================================================================== */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.divider { height: 1px; background: var(--border); border: none; }
.pill-tab { display:inline-flex; padding:4px; background:var(--n-100); border-radius:var(--r-pill); gap:4px; }
.pill-tab button { border:none; background:transparent; padding:7px 16px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); }
.pill-tab button.active { background:#fff; color:var(--navy); box-shadow:var(--sh-sm); }