/*
 * theme.css — the light switch + dark mode for every page (pairs with theme.js).
 * Dark mode is html[data-theme="dark"]; light mode is the pages' own styles, untouched.
 */

/* Cirka, served with the site (Safari doesn't let pages use fonts installed on your Mac).
   Your copy is "free for personal use": get the commercial licence before this goes live. */
@font-face {
  font-family: "Cirka";
  src: url("fonts/Cirka-Variable.ttf") format("truetype-variations"), url("fonts/Cirka-Variable.ttf") format("truetype");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* Cirka's "&" is swapped for Geist's: this face covers only the ampersand, and being declared later it wins over Cirka for
   that one character, wherever Cirka is used. It is a light weight at a slightly smaller size, so it sits quietly between words. */
@font-face {
  font-family: "Cirka";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.1.0/files/geist-sans-latin-200-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0026;
  size-adjust: 84%;
}

/* Every page sits on the same paper: a faint grain on warm white, under a sky wash at the top that follows the visitor's
   time of day (sky-tint.js sets --sky-top / --sky-mid) and eases out gently, with no visible band. */
:root { --sky-top: #fffdf8; --sky-mid: #fffdf8; /* bright warm paper on every page (no sky wash) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .24 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body {
  background-color: #fffdf9;
  background-image:
    var(--paper-grain),
    linear-gradient(180deg,
      var(--sky-top) 0,
      var(--sky-mid) 200px,
      color-mix(in srgb, var(--sky-mid) 78%, transparent) 290px,
      color-mix(in srgb, var(--sky-mid) 52%, transparent) 370px,
      color-mix(in srgb, var(--sky-mid) 28%, transparent) 440px,
      color-mix(in srgb, var(--sky-mid) 10%, transparent) 510px,
      transparent 580px);
  background-size: 180px 180px, 100% 580px;
  background-repeat: repeat, no-repeat;
}


/* ---------- the switch: a small modular switchboard plate ---------- */
light-switch { display: inline-flex; align-items: center; align-self: center; }
.ls-btn { position: relative; display: grid; place-items: center; width: 34px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ls-btn svg { width: 22px; height: auto; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(30,25,50,.12)); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.ls-btn:hover svg { transform: translateY(-1px); }
.ls-btn.ls-press svg { animation: ls-press .28s ease; }
@keyframes ls-press { 40% { transform: scale(.92); } }
.ls-btn:focus-visible { outline: 2px solid #7c8cff; outline-offset: 2px; border-radius: 8px; }
.ls-plate { fill: #fbfaf7; stroke: #dcd8e2; stroke-width: 1; }
.ls-well { fill: #ece9e4; }
.ls-top, .ls-bottom { transition: fill .2s ease; }
/* lights on: the bottom of the rocker is pressed in (down = on, like at home) */
.ls-top { fill: #ffffff; } .ls-bottom { fill: #dedad4; }
html[data-theme="dark"] .ls-top { fill: #dedad4; } html[data-theme="dark"] .ls-bottom { fill: #ffffff; }
.ls-lamp { fill: #e8c3a8; transition: fill .3s ease; }
/* in the dark the little indicator glows, so you can find the switch */
html[data-theme="dark"] .ls-lamp { fill: #ff9a3d; filter: drop-shadow(0 0 2px #ff9a3d) drop-shadow(0 0 4px rgba(255,154,61,.7)); }
html[data-theme="dark"] .ls-plate { fill: #e9e6df; stroke: #4a4658; }
html[data-theme="dark"] .ls-btn svg { filter: drop-shadow(0 0 6px rgba(255,236,200,.08)); }
.ls-tip { position: absolute; top: calc(100% + 2px); left: 50%; transform: translate(-50%, -3px); white-space: nowrap; pointer-events: none;
  font: italic 14px/1 "Cirka", "Instrument Serif", Georgia, serif; color: #8a8597; opacity: 0; transition: opacity .2s ease, transform .25s ease; }
.ls-btn:hover .ls-tip, .ls-btn:focus-visible .ls-tip { opacity: 1; transform: translate(-50%, 0); }

/* switching: everything eases across; lights coming on flicker like a tube light */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, box-shadow .45s ease !important; }
html.theme-anim body { transition: background-color .45s ease, color .45s ease !important; }
.theme-flicker { position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; background: #fff; opacity: 0; animation: tube .6s linear forwards; }
@keyframes tube { 0% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .05; } 26% { opacity: .4; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- dark mode ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --wp-ink: #ece9f2; --wp-muted: #a29eb4; --wl-blue: #aeb6f2;
  --pn-color: #9ea8ff;
}
html[data-theme="dark"] body {
  background-color: #121118 !important; color: #ece9f2 !important;
  background-image: radial-gradient(circle, #2a2834 1px, transparent 1.2px) !important;
}
html[data-theme="dark"] ::selection { background: rgba(158,168,255,.3); }

/* homepage hero */
html[data-theme="dark"] .hero h1 span { color: #9ea8ff; }
html[data-theme="dark"] .pill { background: rgba(233,106,31,.16); color: #ff9a5c; }
html[data-theme="dark"] .past-tag { color: #8f8aa3; }
html[data-theme="dark"] .past .amp { color: #6f6b80; }
html[data-theme="dark"] company-chip .hb-tip, html[data-theme="dark"] company-chip .hb-tip::after { background: #24212e; color: #e6e2ee; }
html[data-theme="dark"] probably-doing { color: #8f8aa3; }
html[data-theme="dark"] delight-word { --dw-ink: #ece9f2; }

/* the game card: a soft dark card instead of white */
html[data-theme="dark"] pixel-hobbies {
  --pg-bg: #1c1a24; --pg-bg-2: #17151e; --pg-bg-shade: rgba(0,0,0,.25); --pg-ink: #ece9f2; --pg-on-ink: #15131c; --pg-muted: #b9b5c8;
  --pg-btn: #2a2735; --pg-btn-hover: #34303f; --pg-ground-color: #34313f;
  --pg-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.35);
}

/* work section + cards */
html[data-theme="dark"] .work-section { --ws-ink: #ece9f2; --ws-muted: #a29eb4; }
html[data-theme="dark"] .work-cover { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="dark"] .work-cover:empty { background: radial-gradient(120% 90% at 20% 0%, #24212e 0%, var(--cover-tint) 75%); }
html[data-theme="dark"] .work-card[data-brand="swiggy"] { --cover-tint: #2b2026; }
html[data-theme="dark"] .work-card[data-brand="zomato"] { --cover-tint: #2c1e24; }
html[data-theme="dark"] .work-card[data-brand="hike"]   { --cover-tint: #1f2333; }
html[data-theme="dark"] .work-card[data-brand="play"]   { --cover-tint: #251f33; }

/* footer note, CTA and its chooser */
html[data-theme="dark"] .footer-note { --ft-ink: #ece9f2; --ft-green: #c3cf6b; }
html[data-theme="dark"] .site-footer.tapri .footer-quote { color: #8f8aa3; }
html[data-theme="dark"] .footer-cta a.ft-pill { color: #c3cf6b; }
html[data-theme="dark"] .footer-cta a.ft-pill:hover, html[data-theme="dark"] .footer-cta a.ft-pill[aria-expanded="true"] { color: #d6e07f; background: rgba(195,207,107,.1); }
html[data-theme="dark"] .tf-chooser { background: #1f1c28; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.45); }
html[data-theme="dark"] .footer-cta .tf-chooser a.tf-chooser-opt { color: #ece9f2; }
html[data-theme="dark"] .footer-cta .tf-chooser a.tf-chooser-opt:hover { background: rgba(255,255,255,.06); color: #ece9f2; }
html[data-theme="dark"] .tf-chooser-opt small { color: #8f8aa3; }

/* sky: chat bubbles and the plane's note (read through custom properties into the shadow DOM) */
html[data-theme="dark"] sky-bits { --sky-bubble: #262334; --sky-bubble-ink: #e6e2f2; --sky-bubble-edge: #3a3650; --sky-bird: #8d89a3; }

/* back-to-top */
html[data-theme="dark"] .pb-top { background: rgba(36,33,46,.92); color: #a7a2bb; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 6px 18px rgba(0,0,0,.4); }
html[data-theme="dark"] .pb-top svg path:first-child { fill: #2a2735; }

/* ---------- work pages + case studies ---------- */
html[data-theme="dark"] .wp-head .pill { background: rgba(233,106,31,.16); color: #ff9a5c; }
html[data-theme="dark"] :is(.wl-col ul, .wl-row, .cs-meta, .cs-next, .cs-deep, .cs-metrics, .cs-metrics div) { border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] :is(.wl-col ul::before, .wl-row::after) { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .ws-pick { background: #1c1a24; color: #ece9f2; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="dark"] .ws-pick[data-side="diners"] { --ws-tint: #2b2026; }
html[data-theme="dark"] .ws-pick[data-side="restaurants"] { --ws-tint: #2b2719; }
html[data-theme="dark"] .wl-tag { color: #f0c46a; background: rgba(240,196,106,.12); box-shadow: inset 0 0 0 1px rgba(240,196,106,.18); }
/* soft panels */
html[data-theme="dark"] :is(.cs-stats li, .cs-tldr, .cs-anat, .cs-cycle, .cs-chips li, .cs-games li, .cs-reasons li, .cs-variants li) { background: #1c1a24; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
html[data-theme="dark"] .cs-variants li:nth-child(2) { background: #262027; }
html[data-theme="dark"] .cs-variants li:nth-child(3) { background: #1f2232; }
/* white cards */
html[data-theme="dark"] :is(.cs-people li, .cs-psych li, .cs-insight, .cs-row-demo) { background: #201d2a; box-shadow: 0 0 0 1px rgba(255,255,255,.07); color: #e6e2ee; }
html[data-theme="dark"] .cs-img figcaption { background: transparent; }
html[data-theme="dark"] :is(.cs-steps-line li::before, .cs-cycle .dot) { background: #121118; }
html[data-theme="dark"] :is(.cs-row-demo .a4, .cs-psych b, .cs.bold .cs-sec h2, .cs.bold .cs-deep h3, .cs.bold .cs-life h2) { color: #ece9f2; }
html[data-theme="dark"] .cs-row-demo .a0 { color: #f3e2a6; background: rgba(255,214,107,.12); }
html[data-theme="dark"] :is(.cs-row-demo .a5, .cs-badge) { color: #8fd3ad; background: rgba(47,158,100,.16); }
html[data-theme="dark"] .cs-badge.soft { color: #b6bad3; background: rgba(255,255,255,.07); }
html[data-theme="dark"] mark.ph { background: rgba(255,214,107,.18); color: #f3e2a6; }
html[data-theme="dark"] .cs-psych i { border-top-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .cs-flow li.win { background: #3a4580; }

@media (prefers-reduced-motion: reduce) { .ls-btn svg, .ls-tip { transition: none; } .ls-btn.ls-press svg { animation: none; } }

/* work card covers in the dark */
html[data-theme="dark"] .work-cover { background: radial-gradient(120% 95% at 25% 0%, #2a2735 0%, var(--cover-tint) 70%); }
html[data-theme="dark"] .work-cover::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* the game card's outline + shadow in the dark (drawn as a drop-shadow so it follows the smoothed corners) */
html[data-theme="dark"] pixel-hobbies { --pg-drop: drop-shadow(0 0 .6px rgba(255,255,255,.14)) drop-shadow(0 12px 28px rgba(0,0,0,.35)); }