/* ═══════════════════════════════════════════════════════════════
   Casa Quipu — Shared Color Palette
   Single source of truth for all color tokens.
   Two themes: ink (default, dark) and parchment (light).
   Theme is applied via the data-theme attribute on <html>.
   Linked by every page before its own <style> block.
   ═══════════════════════════════════════════════════════════════ */

/* ── Default theme: ink (dark) ───────────────────────────────── */
:root,
:root[data-theme="ink"] {
  --bg:          #141210;   /* page background */
  --bg-surface:  #1C1A17;   /* cards, panels, modals, nav, drawers */
  --bg-footer:   #0D0C0A;   /* footer */
  --ink:         #EAE2D0;   /* all primary text, headlines, buttons, links */
  --ink-dim:     #7A7468;   /* secondary text, eyebrows, placeholders, footer text */
  --border:      #2A2820;   /* all borders and dividers at 0.5px */
  --accent:      transparent; /* no accent in ink theme */
  --accent-2:    transparent;
  --scrim:       rgba(13, 12, 10, 0.85);
}

/* ── Alternate theme: parchment (light) ──────────────────────── */
:root[data-theme="parchment"] {
  --bg:          #EFE3D0;   /* warm parchment background */
  --bg-surface:  #E5D8C0;   /* deeper parchment for surfaces */
  --bg-footer:   #DCC8A8;   /* footer goes light too — a darker parchment */
  --ink:         #2A2622;   /* dark text */
  --ink-dim:     #6A6258;   /* dim text */
  --border:      #D4C8B0;   /* hairline borders on light bg */
  --accent:      #C1735A;   /* terra cotta — MEDIA / WEB eyebrows, italic grace notes */
  --accent-2:    #6B7559;   /* sage — OPERATIONS eyebrow */
  --scrim:       rgba(239, 227, 208, 0.85);
}

/* ── Smooth theme transitions ────────────────────────────────── */
html,
body,
section,
header,
footer,
nav,
main,
aside,
article,
div,
span,
p,
h1, h2, h3, h4, h5, h6,
a,
button,
input,
textarea,
select,
label,
li,
td,
th {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease;
}

::placeholder { color: var(--ink-dim); opacity: 1; }

/* ── Theme lock: anything wrapped in [data-theme-locked="ink"] ──
   stays on the ink palette regardless of the page-level theme.
   Used to lock the media page interior to dark for photography. ─ */
[data-theme-locked="ink"],
[data-theme-locked="ink"] * {
  --bg:          #141210;
  --bg-surface:  #1C1A17;
  --bg-footer:   #0D0C0A;
  --ink:         #EAE2D0;
  --ink-dim:     #7A7468;
  --border:      #2A2820;
  --accent:      transparent;
  --accent-2:    transparent;
  --scrim:       rgba(13, 12, 10, 0.85);
}
/* Re-establish color/background on the locked wrapper so children inherit
   the dark palette even when the parent <body> resolved them in parchment. */
[data-theme-locked="ink"] {
  background-color: #141210;
  color: #EAE2D0;
}

/* ── Reduced motion: snap theme changes instantly ────────────── */
@media (prefers-reduced-motion: reduce) {
  html, body, section, header, footer, nav, main, aside, article,
  div, span, p, h1, h2, h3, h4, h5, h6, a, button, input, textarea, select, label, li, td, th {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Theme toggle UI — mirrors the .lang toggle, sharp corners
   ═══════════════════════════════════════════════════════════════ */
.theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui, 'Syne', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.theme__sep { display: none; }   /* no text dot needed — icons separate visually */
.theme__btn {
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 0;            /* sharp corners */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.theme__btn:hover { color: var(--ink); }
.theme__btn.is-active { color: var(--ink); }
.theme__icon { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.theme__icon path,
.theme__icon circle,
.theme__icon line { stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; }

/* Screen reader only label — keeps accessible name without visible text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lang buttons inside the toggles box — force same font/size in both states */
.toggles .lang { font-family: var(--font-ui, 'Syne', sans-serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.toggles .lang__btn,
.toggles .lang__btn.is-active {
  font-family: var(--font-ui, 'Syne', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

/* Mobile-collapsed nav-panel variant for the toggle */
.nav__panel .theme { gap: 10px; }
.nav__panel .theme__btn { padding: var(--s-2, 8px) var(--s-2, 8px); min-height: 44px; }

/* Footer-variant */
.footer__lang .theme__btn { color: var(--ink-dim); padding: 0; }
.footer__lang .theme__btn:hover { color: var(--ink); }
.footer__lang .theme__btn.is-active { color: var(--ink-dim); font-weight: 700; }
.footer__lang .theme__sep { color: var(--border); }

/* ── Toggles group: hairline box around theme + lang ────────── */
.toggles {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-dim);
  padding: 4px 10px;
  gap: 10px;
  line-height: 1;
}
.toggles .theme { gap: 6px; align-items: center; }
.toggles .lang { gap: 6px; align-items: center; line-height: 1; }
.toggles__sep {
  display: inline-block;
  width: 1px;
  background: var(--ink-dim);
  align-self: stretch;
  margin: 4px 0;
  opacity: 0.7;
}

/* Mobile: same toggle, slightly taller tap targets */
@media (max-width: 640px) {
  .toggles { padding: 3px 8px; gap: 8px; }
  .toggles .theme__btn { padding: 8px 4px; }
  .toggles .lang__btn { padding: 6px 2px; min-height: 36px; display: inline-flex; align-items: center; }
}

/* Footer-side: no box wrap needed (footer__lang renders separately) */
.footer__lang .toggles { border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════
   Parchment-only accent overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="parchment"] .t-eyebrow,
[data-theme="parchment"] .t-eyebrow--media,
[data-theme="parchment"] .t-eyebrow--web,
[data-theme="parchment"] .do__card[data-card="media"] .t-eyebrow,
[data-theme="parchment"] .do__card[data-card="web"]   .t-eyebrow {
  color: var(--accent);
}
[data-theme="parchment"] .t-eyebrow--lichen,
[data-theme="parchment"] .t-eyebrow--ops,
[data-theme="parchment"] .do__card[data-card="ops"] .t-eyebrow,
[data-theme="parchment"] .do__card[data-card="operations"] .t-eyebrow {
  color: var(--accent-2);
}
[data-theme="parchment"] .hero em,
[data-theme="parchment"] .hero__bib em,
[data-theme="parchment"] .hero__byline em,
[data-theme="parchment"] .editorial__body em {
  color: var(--accent);
}
