/* khalid.tools shared design system.
 *
 * Everything in here is used by more than one page: the colour tokens, the reset, the top
 * bar, the button, the strip, the footer shell. Anything that belongs to a single page stays
 * in that page's own <style> block, which is loaded after this file and therefore wins ties.
 *
 * The one rule worth keeping: if a second page needs it, it moves here. Copying a token into
 * a page is how two pages quietly stop matching. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --muted-bg: #f1f5f9;
  --fg: #0f172a;
  /* Slightly darker than slate-500 (#64748b). On the tinted strip background slate-500 lands
     at 4.34:1, which misses WCAG AA. This value clears 5.2:1 there and is visually identical. */
  --fg-muted: #5a6779;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-hover: #94a3b8;
  --accent: #2563eb;
  --btn-fg: #f8fafc;
  --btn-bg: #0f172a;
  --btn-bg-hover: #1e293b;
  --ring: #2563eb;
  --ok: #15803d;
  --mark-bg: #fef08a;
  --mark-fg: #0f172a;
  --radius: 8px;
  /* Pages that need a wider measure override this in their own block. */
  --maxw: 640px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #22252a;
    --surface: #292c32;
    --surface-2: #2e3138;
    --muted-bg: #292c32;
    --fg: #e5e5e5;
    --fg-muted: #cccccc;
    --border: #393e46;
    --border-strong: #4a5059;
    --border-hover: #5b626d;
    --accent: #8ab4f8;
    --btn-fg: #22252a;
    --btn-bg: #e5e5e5;
    --btn-bg-hover: #ffffff;
    --ring: #8ab4f8;
    --ok: #4ade80;
    --mark-bg: #5c4d1f;
    --mark-fg: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #22252a;
  --surface: #292c32;
  --surface-2: #2e3138;
  --muted-bg: #292c32;
  --fg: #e5e5e5;
  --fg-muted: #cccccc;
  --border: #393e46;
  --border-strong: #4a5059;
  --border-hover: #5b626d;
  --accent: #8ab4f8;
  --btn-fg: #22252a;
  --btn-bg: #e5e5e5;
  --btn-bg-hover: #ffffff;
  --ring: #8ab4f8;
  --ok: #4ade80;
  --mark-bg: #5c4d1f;
  --mark-fg: #ffffff;
  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* viewport-fit=cover plus safe-area padding keeps content clear of the notch and the iOS
   home indicator when the page is opened from a QR scan in full screen. */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}

/* Top bar */
.topbar { border-bottom: 1px solid var(--border); background: var(--bg); }
.topbar-in { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
/* The ".k" glyph is the outlined Space Grotesk mark from favicon.svg on the same 32-unit
   grid, so the tile and the favicon are the same logo. It is drawn inline in currentColor
   rather than pointing at favicon.svg, because the logo's own near-black gradient would
   sink into the dark-mode background; the tile has to invert with the theme. */
.wordmark .tile {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--btn-bg); color: var(--btn-fg);
}
.wordmark .tile svg { display: block; width: 100%; height: 100%; }
.theme-toggle {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius); color: var(--fg-muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-hover); background: var(--surface-2); }
/* Scoped to .theme-toggle so these outrank ".theme-toggle svg" below. A bare ".icon-moon"
   loses that specificity fight and both icons render at once. */
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: block; }
}

/* Button */
.btn {
  flex: 1 1 auto; min-width: 104px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg);
  font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:hover { background: var(--surface-2); border-color: var(--border-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
.btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }

/* Strip: the bordered, tinted block used for a titled section of content. */
.strip { border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted-bg); padding: 20px; }
.strip h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.strip > p { margin-top: 7px; font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; }
.strip .btn { margin-top: 15px; flex: 0 1 auto; background: var(--surface); }

/* Footer shell. What sits inside it differs per page. */
footer { margin-top: 40px; border-top: 1px solid var(--border); padding: 26px 0 44px; text-align: center; }
footer .colophon { font-size: 12.5px; color: var(--fg-muted); }

.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) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}