/* ============================================================
   Söderströms — soderstroms.net
   Flattened from the "Söderströms" design system
   (paper & ink — warm Scandinavian neutrals, signal blue,
   ember pop). Tokens → component classes → page styles.
   ============================================================ */

/* Webfonts are loaded via <link> in index.html (with preconnect).
   These fallback faces borrow a system font but override its metrics to
   match the webfonts, so the swap from fallback → webfont causes no layout
   shift (CLS). */
@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Menlo'), local('Consolas'), local('Courier New');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* ---- Warm neutral scale (paper → ink) ---- */
  --bone-paper: #F4F1E9;
  --bone-50:    #F8F5EE;
  --bone-100:   #F1EDE2;
  --bone-150:   #E9E4D6;
  --bone-200:   #DED8C8;
  --bone-300:   #C7C0AE;
  --bone-400:   #A69E8C;
  --bone-500:   #837C6E;
  --bone-600:   #5F5A4F;
  --bone-700:   #46433B;
  --bone-800:   #2B2924;
  --bone-900:   #1B1A17;
  --paper-card: #FBFAF6;

  /* ---- Signal blue (primary brand) ---- */
  --blue-50:  #EAEDFB;
  --blue-100: #D3DAF7;
  --blue-200: #A6B4EF;
  --blue-300: #6E81E6;
  --blue-400: #4257DE;
  --blue-500: #2A41D8;
  --blue-600: #2034B0;
  --blue-700: #1A2A8C;
  --blue-800: #16236E;

  /* ---- Ember (playful pop / marker highlight) ---- */
  --ember-200: #FFD2C2;
  --ember-300: #FFB199;
  --ember-400: #FF8A63;
  --ember-500: #FF6A3D;
  --ember-600: #E5481A;
  --highlight: #FFE5A8;

  /* ---- Functional / semantic hues ---- */
  --pine-500:   #256B40;   /* darkened from #2E7D52 to clear AA 4.5:1 on --pine-50 */
  --pine-50:    #E4F0E8;
  --amber-500:  #C9851F;
  --amber-50:   #F7ECD4;
  --lingon-500: #C8412B;
  --lingon-50:  #F7E1DC;

  /* ---- Semantic surfaces ---- */
  --surface-page:    var(--bone-paper);
  --surface-card:    var(--paper-card);
  --surface-sunken:  var(--bone-150);
  --surface-raised:  #FFFFFF;
  --surface-inverse: var(--bone-900);

  /* ---- Text ---- */
  --text-strong:   var(--bone-900);
  --text-body:     var(--bone-800);
  --text-muted:    var(--bone-600);
  --text-subtle:   #726B5C;   /* darkened from --bone-500 to clear AA 4.5:1 on card/page */
  --text-inverse:  var(--bone-50);
  --text-link:     var(--blue-500);
  --text-on-brand: #FFFFFF;

  /* ---- Borders & lines ---- */
  --border-hairline: var(--bone-200);
  --border-default:  var(--bone-300);
  --border-strong:   var(--bone-900);
  --border-focus:    var(--blue-500);

  /* ---- Brand ---- */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-accent:         var(--ember-500);
  --brand-accent-hover:   var(--ember-600);
  --brand-marker:         var(--highlight);

  /* ---- Semantic feedback ---- */
  --feedback-success: var(--pine-500);
  --feedback-warning: var(--amber-500);
  --feedback-danger:  var(--lingon-500);
  --feedback-info:    var(--blue-500);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 32%, transparent);
  --focus-ring: var(--ring);

  /* ---- Typography ---- */
  --font-sans: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-wide:   0.04em;
  --tracking-label:  0.12em;

  /* ---- Spacing & layout ---- */
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 8vw, 8rem);

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-width-hair: 1px;
  --border-width-bold: 2px;

  /* ---- Soft ambient shadows ---- */
  --shadow-xs: 0 1px 2px rgba(27, 26, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(27, 26, 23, 0.07), 0 1px 2px rgba(27, 26, 23, 0.05);
  --shadow-md: 0 8px 24px rgba(27, 26, 23, 0.09), 0 2px 6px rgba(27, 26, 23, 0.05);
  --shadow-lg: 0 20px 48px rgba(27, 26, 23, 0.12), 0 4px 12px rgba(27, 26, 23, 0.06);

  /* ---- Hard offset shadow (keycap / sticker) ---- */
  --shadow-hard:       3px 3px 0 var(--bone-900);
  --shadow-hard-blue:  3px 3px 0 var(--blue-500);
  --shadow-hard-ember: 3px 3px 0 var(--ember-500);

  /* ---- Motion ---- */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);
  --transition-color: color var(--duration-fast) var(--ease-standard),
                      background-color var(--duration-fast) var(--ease-standard),
                      border-color var(--duration-fast) var(--ease-standard);

  /* Native UI (form controls, scrollbars) matches the active theme */
  color-scheme: light;
}

html.sds-dark { color-scheme: dark; }

/* Visually-hidden, still announced by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--surface-page);
  font-weight: var(--weight-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--blue-200); color: var(--bone-900); }

/* Graph-paper backdrop */
.ds-grid-bg {
  background-color: var(--surface-page);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--bone-900) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bone-900) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Mono eyebrow / label utility */
.ds-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Marker highlight */
.ds-mark {
  background: linear-gradient(transparent 62%, var(--brand-marker) 62%);
  padding: 0 0.08em;
}

/* ============================================================
   Component: Badge
   ============================================================ */
.sds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; line-height: 1;
  padding: 4px 9px; border-radius: var(--radius-xs);
  border: 1px solid transparent; white-space: nowrap;
}
.sds-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.sds-badge--neutral { background: var(--bone-150); color: var(--bone-700); border-color: var(--bone-200); }
.sds-badge--info    { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.sds-badge--success { background: var(--pine-50); color: var(--pine-500); border-color: color-mix(in srgb, var(--pine-500) 22%, transparent); }
.sds-badge--warning { background: var(--amber-50); color: #946012; border-color: color-mix(in srgb, var(--amber-500) 28%, transparent); }
.sds-badge--danger  { background: var(--lingon-50); color: var(--lingon-500); border-color: color-mix(in srgb, var(--lingon-500) 24%, transparent); }
.sds-badge--accent  { background: var(--ember-200); color: var(--ember-600); border-color: color-mix(in srgb, var(--ember-500) 30%, transparent); }
.sds-badge--solid   { background: var(--bone-900); color: var(--bone-50); border-color: var(--bone-900); }

/* ============================================================
   Component: Button
   ============================================================ */
.sds-btn {
  --_pad-x: 18px; --_pad-y: 10px; --_fs: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--_fs); line-height: 1; letter-spacing: -0.01em;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--radius-sm); border: var(--border-width-bold) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.sds-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.sds-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sds-btn--sm { --_pad-x: 13px; --_pad-y: 7px; --_fs: 13px; }
.sds-btn--lg { --_pad-x: 24px; --_pad-y: 14px; --_fs: 17px; }

.sds-btn--primary { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); }
.sds-btn--primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.sds-btn--primary:active { background: var(--brand-primary-active); }

.sds-btn--accent { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.sds-btn--accent:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }

.sds-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); }
.sds-btn--secondary:hover { background: var(--bone-100); }

.sds-btn--ghost { background: transparent; color: var(--text-strong); border-color: transparent; }
.sds-btn--ghost:hover { background: color-mix(in srgb, var(--bone-900) 7%, transparent); }

.sds-btn--keycap { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); box-shadow: var(--shadow-hard); }
.sds-btn--keycap:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bone-900); }
.sds-btn--keycap:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--bone-900); }

.sds-btn--block { display: flex; width: 100%; }

/* ============================================================
   Component: Card
   ============================================================ */
.sds-card {
  position: relative; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--_pad, 24px); color: var(--text-body);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-fast) var(--ease-standard);
}
.sds-card--flush { --_pad: 0px; }
.sds-card--tight { --_pad: 16px; }
.sds-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.sds-card--keycap { border: 2px solid var(--bone-900); box-shadow: var(--shadow-hard); border-radius: var(--radius-md); }
.sds-card--grid {
  background-color: var(--surface-card);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--bone-900) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bone-900) 5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sds-card--ink { background: var(--bone-900); color: var(--bone-100); border-color: var(--bone-900); }
.sds-card--interactive { cursor: pointer; }
.sds-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-default); }
.sds-card--interactive.sds-card--keycap:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--bone-900); }

/* ============================================================
   Component: Tag
   ============================================================ */
.sds-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  line-height: 1; color: var(--text-body);
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--border-default);
  transition: var(--transition-color);
}
.sds-tag--active { background: var(--bone-900); color: var(--bone-50); border-color: var(--bone-900); }
.sds-tag__hash { color: var(--brand-primary); }
.sds-tag--active .sds-tag__hash { color: var(--ember-400); }

/* ============================================================
   Page styles (from the .dc.html <style> block)
   ============================================================ */
html, body { margin: 0; background: var(--surface-page); }

@keyframes sds-blink { 50% { opacity: 0; } }

.pjcard { display: block; }
.pjcard .sds-card { transition: box-shadow .18s cubic-bezier(.2,0,0,1), border-color .18s ease; }
.pjcard:hover .sds-card { box-shadow: 6px 6px 0 var(--bone-900) !important; }
.pjcard:hover .pjarr { color: var(--ember-500); }
.pjarr { transition: color .18s ease; }

/* keycap buttons: shadow-based feedback instead of transform (avoids text re-raster) */
.sds-btn--keycap { transition: box-shadow .18s cubic-bezier(.2,0,0,1) !important; }
.sds-btn--keycap:hover { transform: none !important; box-shadow: 5px 5px 0 var(--bone-900) !important; }
.sds-btn--keycap:active { transform: none !important; box-shadow: 1px 1px 0 var(--bone-900) !important; }

.themebtn { transition: border-color .18s ease, color .18s ease; }
.themebtn:hover { border-color: var(--border-strong); color: var(--text-strong); }

/* Visible keyboard focus for interactive elements without a built-in ring */
.themebtn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--border-focus); }
.pjcard { border-radius: var(--radius-md); }
.pjcard:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.sds-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Reduced motion: stop the blinking terminal caret */
@media (prefers-reduced-motion: reduce) {
  .term-caret { animation: none !important; }
}

/* ============================================================
   Dark mode — re-tone semantic tokens, brand stays.
   Scoped to html.sds-dark so a blocking <head> script can set
   it on document.documentElement before first paint (no flash).
   ============================================================ */
html.sds-dark {
  --surface-page:#14130F; --surface-card:#211E18; --surface-sunken:#100F0C; --paper-card:#211E18;
  --bone-900:#ECE8DE; --text-strong:#F6F3EC; --text-body:#D8D3C6; --text-muted:#A39C8D; --text-subtle:#827B6D;
  --border-hairline:rgba(244,241,233,0.10); --border-default:rgba(244,241,233,0.20); --border-strong:#ECE8DE;
  --blue-50:rgba(90,112,236,0.20); --blue-100:rgba(90,112,236,0.32); --blue-700:#AEBBFF;
  --pine-50:rgba(64,150,104,0.22); --pine-500:#63BB8B;
  --shadow-hard:3px 3px 0 #ECE8DE;
  background:#14130F;
}
html.sds-dark .ds-mark { background:linear-gradient(transparent 62%, color-mix(in srgb, var(--ember-500) 42%, transparent) 62%); }