/* Light mode, and the mobile sizing, for the pages that are not index.html.
 *
 * docs, showcase and terms were each written standalone: their own <style>
 * block, their own nav, their own palette, and no link to styles.css or
 * main.js. The theme switch lives in those two files, so on three of the
 * four pages on this site the switch simply did not exist - the toggle was
 * absent from the nav and the colours were hardcoded dark. Anyone who chose
 * light on the home page got it for exactly one page.
 *
 * Rather than pull those pages into the whole of styles.css - which is built
 * around the home page's markup and would fight their own rules - this file
 * only re-points the CSS variables each of them already uses, so one class
 * on <html> repaints all three. Their own :root blocks stay as the dark
 * definition; these are the light ones.
 */

/* ------------------------------------------------------------------ docs
   and terms share a palette: --bg, --panel, --text, --muted, --dimmer,
   --card-border, --code-bg. */
html.light {
  --bg: #f7f7f9;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-hover: rgba(255, 255, 255, 1);
  --card-border: rgba(9, 9, 13, 0.12);
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.18);
  --emerald: #047857;
  --cyan: #0e7490;
  --purple: #7e22ce;
  --text: #0f1115;
  --muted: #4b5563;
  /* #6b7280 is 4.34:1 on the code-block headers - the language labels above
     every install command - which is under 4.5 for text that size. */
  --dimmer: #596273;
  --code-bg: #f1f2f6;

  /* showcase.html names everything differently. */
  --bg-dark: #f7f7f9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --border-color: rgba(9, 9, 13, 0.12);
  --border-active: rgba(79, 70, 229, 0.5);
  --primary: #4f46e5;
  --primary-glow: rgba(79, 70, 229, 0.18);
  /* #047857 lands at 4.48:1 on the green release badge and on the inline
     "SMARAN Code" mentions - two hundredths under, which is still a fail
     and still the kind nobody would ever catch by eye. */
  --accent-emerald: #065f46;
  --accent-cyan: #0e7490;
  --accent-amber: #b45309;
  --accent-rose: #be123c;
  --accent-purple: #7e22ce;
  --text-main: #0f1115;
  --text-muted: #4b5563;
  --text-dim: #6b7280;

  /* showcase.html painted most of itself with literal colours, which is why
     it stayed dark while its text followed the theme and became unreadable.
     Those literals are now these variables; the dark values above the fold
     in that file are byte-for-byte what they replaced, so dark mode cannot
     have shifted. These are their light counterparts.

     The accents are darkened rather than reused: #34d399 on white is 1.8:1,
     which is not text, it is a suggestion of text. */
  --surface-1: #ffffff;
  --surface-2: #eceef2;
  --surface-sunken: rgba(236, 238, 242, 0.9);
  --surface-raised: rgba(255, 255, 255, 0.95);
  --overlay-soft: rgba(9, 9, 13, 0.03);
  --overlay: rgba(9, 9, 13, 0.05);
  --overlay-strong: rgba(9, 9, 13, 0.07);
  --text-bright: #0f1115;
  --text-soft: #374151;
  --text-faint: #52606d;
  --accent-sky: #0369a1;
  --accent-indigo: #4338ca;
  --accent-indigo-soft: #4f46e5;
  --accent-indigo-pale: #4338ca;
  --accent-violet: #7e22ce;
  --accent-violet-pale: #6b21a8;
  /* The green release badge and the inline "SMARAN Code" mentions take
     their colour from here, not from --accent-emerald, and #047857 landed
     at 4.48:1 on their tinted backgrounds - two hundredths under. */
  --accent-mint: #065f46;
  /* #a16207 read 4.42:1 on the pillar boxes and 4.37:1 in the amber
     module icon - both just under the 4.5 these 12px bold headings
     need, and both only visible once the surfaces under them were
     composited properly. One shade down clears it. */
  --accent-gold: #92400e;
  --accent-coral: #be123c;
  --accent-teal: #0e7490;
}

/* Dark stays exactly as it was. Spelled out rather than left to the page's
   own :root so that nothing here can leak into it. */
html:not(.light) {
  --text-bright: #ffffff;
  --text-soft: #d4d4d8;
  --text-faint: #94a3b8;
}

/* The page background is painted with radial gradients tuned for a black
   canvas; on white they read as dirty smears. */
html.light body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(220, 38, 38, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(14, 116, 144, 0.05) 0%, transparent 45%);
  color: var(--text);
}

/* Colours written literally rather than as variables, which is most of
   showcase.html. Scoped to light so dark is untouched. */
html.light .nav,
html.light header.nav { background: rgba(247, 247, 249, 0.92); }
html.light [style*="#fff"],
html.light h1, html.light h2, html.light h3, html.light h4 { color: var(--text); }
html.light pre, html.light code { color: #111318; }
html.light .doc-section p,
html.light .callout-body p { color: #374151; }

/* ------------------------------------------------------------- the toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12));
  background: transparent; color: inherit;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover { background: rgba(127, 127, 127, 0.14); }
.theme-toggle svg { width: 16px; height: 16px; }
/* One button, two icons; the class on <html> decides which is drawn. */
.theme-toggle .icon-sun { display: none; }
html.light .theme-toggle .icon-sun { display: block; }
html.light .theme-toggle .icon-moon { display: none; }

/* --------------------------------------------------------------- mobile
   These pages were laid out for a desktop nav and never revisited. The
   header is the part that breaks first: a brand plus four links plus a
   badge in one non-wrapping row runs off a 375px screen and takes the
   horizontal scrollbar - and the rest of the page - with it. */
.site-nav-links {
  display: flex; align-items: center; gap: 18px;
  font-size: 0.9rem; font-weight: 600; flex-wrap: wrap;
}

@media (max-width: 760px) {
  .nav, header.nav { padding: 12px 16px; }
  .nav-inner, .site-nav-links { flex-wrap: wrap; gap: 10px 14px; }
  .site-nav-links { font-size: 0.82rem; width: 100%; }
}

/* Nothing on a phone should be reachable only by scrolling sideways. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, table { max-width: 100%; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* showcase.html's nav links carried their colour inline; the shared rule has
   to win over that, and over docs/terms which style .nav-links a themselves. */
.site-nav-links a { color: var(--muted, var(--text-muted, #9ca3af)); text-decoration: none; }
.site-nav-links a:hover { color: var(--text, var(--text-main, #fff)); }
.site-nav-links a[aria-current="page"] { color: var(--red, var(--primary, #ef4444)); }

/* docs.html and terms.html kept a few literals of their own: the brand
   wordmark, the version pill, the Copy button, and - the one that mattered -
   every paragraph of the Terms, set to #d1d5db and therefore near-invisible
   on white. */
html.light {
  --badge-text: #b91c1c;
  --btn-text: #374151;
  --body-text: #374151;
  --mint-pale: #065f46;
}

/* Gradients do not follow a variable that is not in them.
 *
 * The developer card on showcase.html painted itself with two literal dark
 * colours - rgba(28, 25, 65, .6) to rgba(15, 15, 22, .9) - written into the
 * `background` shorthand rather than taken from --bg-card. Light mode
 * repointed every variable the page uses and this rule did not contain one,
 * so the card stayed almost black while the text inside it turned #0f1115.
 * Measured at 1.05:1, which is not low contrast, it is no contrast: the bio
 * was invisible and the feature pills under it were shapes with nothing in
 * them.
 *
 * Checking the variables flipped was not enough to catch this, because they
 * did flip. What was needed was compositing each layer down to an opaque
 * colour and reading the result, which is how the card was found.
 */
html.light .architect-card {
  background: linear-gradient(135deg, rgba(224, 226, 245, 0.75) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow: 0 20px 45px -18px rgba(15, 17, 21, 0.18);
}

/* Its glow sat at 20% indigo over a dark card. Over a light one the same
   wash is a smudge, so it is dropped to a hint. */
html.light .architect-card::before {
  background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
}

/* The three profile buttons keep white text, so their fills have to stay
   dark enough to carry it in either theme. GitHub's began at
   var(--surface-raised) - white in light mode - which put white text on
   white for the first half of the button. */
html.light .btn-link.portfolio {
  background: linear-gradient(135deg, rgba(126, 34, 206, 0.95), rgba(88, 28, 135, 0.9));
}
html.light .btn-link.linkedin {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.95), rgba(30, 58, 138, 0.9));
}
html.light .btn-link.github {
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.97), rgba(17, 24, 39, 0.92));
  border-color: rgba(17, 24, 39, 0.35);
  box-shadow: 0 0 18px rgba(17, 24, 39, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html.light .btn-link { color: #ffffff; }

/* The feature pills under the bio set `background: rgba(0, 0, 0, .4)` - a
   literal, like the card around them. Over a light card that composites to
   rgb(69, 68, 83) while the label resolves to #374151: 1.09:1, a row of
   shapes with nothing legible in them.
 *
 * Note what is NOT here: .hero-title. It is gradient text via
 * background-clip, so its stops are the letters themselves rather than
 * anything behind them, and in light mode --text-bright already resolves
 * dark. A contrast sweep flags it at 1:1 because it reads the gradient as a
 * backdrop; recolouring it would have been a design change made to satisfy a
 * measurement rather than a reader. */
html.light .skill-tag {
  background: rgba(15, 17, 21, 0.06);
  border-color: rgba(15, 17, 21, 0.12);
  color: #374151;
}

/* The last literal of its kind on showcase: the three pillar boxes inside
   each module card set `background: rgba(0, 0, 0, .3)`, which over a white
   card is mid-grey, and put the amber, mint and indigo headings on it at
   2.3:1. The two remaining rgba(0, 0, 0, …) values in that file are
   box-shadows, which are shadows in either theme and are left alone. */
html.light .pillar-box {
  background: rgba(15, 17, 21, 0.05);
  border-color: rgba(15, 17, 21, 0.10);
}

/* White stays white on a saturated fill.
 *
 * Both of these set `color: var(--text-bright)` over a solid indigo, which is
 * correct in dark mode and inverts in light: --text-bright resolves to
 * #0f1115 there, so the avatar's initials and the selected tab's label went
 * near-black on #4f46e5 at 3:1. The fill does not change between themes, so
 * neither should the text on it. */
html.light .arch-avatar,
html.light .tab-btn.active {
  color: #ffffff;
}

/* The current page's nav link resolves through `var(--red, var(--primary, …))`.
   docs and terms define --red and land on it; showcase does not, so it fell
   through to --primary, #6366f1, which is 4.45:1 on that page's near-black -
   just under. The fallback chain gains a lighter indigo for the page with no
   --red, leaving the other two exactly where they were. */
html:not(.light) .site-nav-links a[aria-current="page"] {
  color: var(--red, var(--accent-indigo, #818cf8));
}