/* ─────────────────────────────────────────────
   Theme tokens — dark (default) & light

   Loaded on index, imprint and the case study pages.
   The project detail pages (whymars, visual language) keep their
   own brand palette and do not include this file.

   Light values live on :root[data-theme="light"], which outranks the
   plain :root blocks inside each page's own <style>.
   ───────────────────────────────────────────── */

:root {
  --ink-rgb:       255, 255, 255;              /* foreground base for alpha text */
  --accent-rgb:    217, 255, 128;
  --on-accent:     #111010;                    /* text sitting on an accent fill */
  --grid-line:     rgba(255, 255, 255, 0.04);
  --hairline:      rgba(255, 255, 255, 0.07);
  --divider-line:  rgba(255, 255, 255, 0.20);
  --dot-rgb:       160, 160, 160;              /* hero dot field */
  --header-bg:     rgba(17, 16, 16, 0.9);
  --overlay-bg:    rgba(17, 16, 16, 0.97);
  --heading-muted: #b3b3b3;                    /* imprint / privacy headings */
  --cursor-fill:   #6726ff;                    /* Figma collaborator cursor */
  --cursor-edge:   #4d1acc;
  --cursor-ring:   #ffffff;
}

:root[data-theme="light"] {
  --bg:            #f4f3f0;
  --bg-work:       #eae8e3;
  --accent:        #6726ff;                    /* the case study purple */
  --accent-rgb:    103, 38, 255;
  --on-accent:     #ffffff;
  --text-muted1:   #403e3b;
  --text-muted2:   #65625d;
  --text-white:    #15140f;
  --neutral:       #15140f;

  --ink-rgb:       21, 20, 15;
  --grid-line:     rgba(0, 0, 0, 0.06);
  --hairline:      rgba(0, 0, 0, 0.10);
  --divider-line:  rgba(0, 0, 0, 0.18);
  --dot-rgb:       120, 118, 112;
  --header-bg:     rgba(244, 243, 240, 0.9);
  --overlay-bg:    rgba(244, 243, 240, 0.97);
  --heading-muted: #55534e;
  /* the accent is purple here, so the cursor takes its own orange */
  --cursor-fill:   #ff6200;
  --cursor-edge:   #cc4e00;
  --cursor-ring:   #ffffff;
}

/* The footer keeps its dark surface in both modes — it is the page's
   closing block and the deco artwork relies on a dark backdrop. */

/* ── Light-mode component corrections ───────────────────────────── */

/* Faint uppercase labels need a little more weight on a light surface */
:root[data-theme="light"] .cs-tags-line,
:root[data-theme="light"] .cs-section-label,
:root[data-theme="light"] .cs-section-team {
  color: rgba(var(--ink-rgb), 0.58);
}
:root[data-theme="light"] .cs-subtitle {
  color: rgba(var(--ink-rgb), 0.68);
}

/* The logo mark is a mid grey tuned for the dark header */
:root[data-theme="light"] .logo-svg { color: #6b6963; }

/* Hero / card illustrations are dimmed against their dark brand tiles.
   They sit on their own solid colour, so they stay as they are. */

/* The bloom canvas clears to black and screens over a dark page. On a light
   page screening would wash it out, so invert it and multiply instead: black
   becomes white (no-op under multiply) and the beam darkens the backdrop.
   The shader feeds it the inverted accent so it lands back on #6726ff. */
:root[data-theme="light"] #bloom-mv {
  mix-blend-mode: multiply;
  filter: invert(1);
}

/* ── Project card badges ─────────────────────────────────────────
   A project card is an <a>. Anything inside it without a colour of its own
   inherits the browser's link colour — blue, and purple once the linked page
   has been visited, which is what turned the AI badge violet.
   The rule lives here rather than in the page because this file is versioned
   in the <link> tag: a browser holding a cached copy of index.html still
   picks it up. The doubled class makes it outrank the page's own rules.
   ───────────────────────────────────────────────────────────────── */
.fcard.fcard--ui .fcard-badge,
.fcard.fcard--visual .fcard-badge {
  color: #000;   /* solid, so nothing can be inherited through it — 7.5:1 on the card's orange */
  opacity: 1;
}
.fcard.fcard--whymars .fcard-badge,
.fcard.fcard--ambient .fcard-badge,
.fcard.fcard--merch .fcard-badge {
  color: #fff;
  opacity: 1;
}

/* Smooth the switch */
body,
header,
#home, #work, #about, #fun, #skills,
.mobile-nav-overlay {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Theme switch — a RubberSegment over System / Light / Dark ──── */
.theme-switch { position: relative; flex-shrink: 0; }

.rubber-segment {
  /* the active side carries the theme's accent — lime in dark, purple in
     light — with --on-accent supplying the icon colour that sits on it */
  --rs-track:      rgba(var(--ink-rgb), 0.07);
  --rs-thumb:      var(--accent);
  --rs-ink:        var(--text-muted1);
  --rs-ink-active: var(--on-accent);
  --rs-idle: 0.75;
  --rs-hover: 1;
  --rs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  vertical-align: middle;
  padding: var(--rs-inset);
  border: 1px solid var(--hairline);
  border-radius: var(--rs-radius);
  background: var(--rs-track);
  font-family: var(--font-ws), sans-serif;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rubber-segment[data-equal] { grid-auto-columns: minmax(0, 1fr); }
.rubber-segment[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

.rubber-segment__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: calc(var(--rs-h) - var(--rs-inset) * 2);
  min-width: var(--rs-min);
  margin: 0;
  padding: 0 var(--rs-pad);
  border: 0;
  border-radius: var(--rs-thumb-radius);
  background: none;
  color: var(--rs-ink);
  opacity: var(--rs-idle);
  font: inherit;
  font-size: var(--rs-font);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 160ms ease, transform 160ms var(--rs-ease-out);
}
.rubber-segment__icon { display: flex; }
.rubber-segment__icon svg { width: 14px; height: 14px; display: block; }

.rubber-segment__item[aria-checked='true'] { cursor: default; }
.rubber-segment[data-draggable] .rubber-segment__item[aria-checked='true'] { cursor: grab; }
.rubber-segment[data-held],
.rubber-segment[data-held] .rubber-segment__item { cursor: grabbing; }
.rubber-segment__item[data-pressed] { transform: scale(0.96); }
.rubber-segment__item:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .rubber-segment__item[aria-checked='false']:hover { opacity: var(--rs-hover); }
}

.rubber-segment__thumb {
  position: absolute;
  inset: var(--rs-inset);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  background: var(--rs-thumb);
  color: var(--rs-ink-active);
  pointer-events: none;
}
.rubber-segment[data-equal] .rubber-segment__thumb { grid-auto-columns: minmax(0, 1fr); }
.rubber-segment__copy { color: inherit; opacity: 1; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .rubber-segment__item { transition: opacity 160ms ease; }
}

/* Icons carry the meaning here; the labels stay for screen readers only. */
.theme-switch .rubber-segment { --rs-pad: 10px; --rs-min: 38px; }
.theme-switch .rubber-segment__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.theme-switch .rubber-segment__icon svg { width: 15px; height: 15px; }

/* Pages without a header — float it where the nav would be */
.theme-switch--float {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 120;
}
/* Floating, it has no header bar underneath, so it carries its own surface.
   The track alone is a 7% tint of the ink colour — on the page background
   that is enough, but the switch is fixed to the viewport and can end up
   over anything that scrolls past, including the footer, which stays dark
   in light mode. Against that, a light-mode switch had dark icons on a dark
   backdrop. An opaque surface in the page's own colour keeps it readable
   wherever it lands. */
.theme-switch--float .rubber-segment {
  background: var(--header-bg);
  border-color: var(--hairline);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 768px) {
  .theme-switch--float { top: 16px; right: 20px; }
}