/* ============================================================
   Shared design system for katherineroot.com
   Load after assets/theme-init.js in <head>. Pages add their own
   <style> block for anything page-specific on top of this.
   ============================================================ */

:root{
  /* night (also the no-JS fallback) */
  --paper:#17140F;      /* dark field */
  --ink:#FFF1D6;        /* cream type */
  --muted:#9B9384;
  --surface-rgb:255,241,214;  /* --ink as r,g,b — translucent borders/tints on dark bg */
  --accent:#C8F135;     /* the pop color — bright enough to read on this dark paper */
  --accent-ink:#17140F; /* text/icon color for content drawn ON TOP of --accent */
  --dur: .5s;
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* --- time of day: theme-init.js sets data-time on <html> before first paint ---
   Each theme repicks --accent (and --accent-ink) for its own paper — a color
   that pops on dark paper (lime) goes nearly invisible on a light one, so
   morning/afternoon get their own darker accent instead of inheriting lime. */
:root[data-time="morning"]{
  --paper:#FFE49E;
  --ink:#231B12;
  --muted:#5C4A28;
  --surface-rgb:35,27,18;
  --accent:#AEB8E0;      /* pastel periwinkle */
  --accent-ink:#17140F;
}
:root[data-time="afternoon"]{
  --paper:#C8E5F5;
  --ink:#142430;
  --muted:#2D4552;
  --surface-rgb:20,36,48;
  --accent:#C3AFE0;      /* pastel lavender */
  --accent-ink:#17140F;
}
:root[data-time="evening"]{
  --paper:#4F294C;
  --ink:#FFF1D6;
  --muted:#C9A8C6;
  --surface-rgb:255,241,214;
  /* lime still pops fine on this dark plum — no accent override needed */
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
     -webkit-font-smoothing:antialiased;
     transition:background-color .5s ease,color .5s ease}

.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}

.header{max-width:1080px;margin:0 auto;padding:28px clamp(20px,5vw,48px) 0}

/* --- nav --- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav__mark{--tilt:-3deg;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
           display:inline-block;transition:transform .18s var(--spring),color .18s}
.nav__mark:hover,.nav__mark:focus-visible{transform:translateY(-3px) rotate(var(--tilt));color:var(--accent);outline:none}
.nav__links{display:flex;gap:clamp(14px,3vw,22px);list-style:none;margin:0;padding:0}
.nav__links a{--tilt:-4deg;font-size:14px;color:var(--muted);text-decoration:none;
              display:inline-block;transition:transform .18s var(--spring),color .18s}
.nav__links a:hover,.nav__links a:focus-visible{transform:translateY(-3px) rotate(var(--tilt));color:var(--accent);outline:none}
.nav__links a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* --- page heading (subpages use this instead of the animated home name) --- */
.page-head{max-width:1080px;margin:clamp(48px,10vw,96px) auto 0;padding:0 clamp(20px,5vw,48px)}
.page-head__title{font-size:clamp(40px,9vw,88px);line-height:1;font-weight:600;letter-spacing:-.03em;margin:0}
.page-head__intro{font-size:clamp(16px,2vw,19px);color:var(--muted);line-height:1.55;
                   max-width:640px;margin:20px 0 0}

/* --- card grid: reused for routes, case studies, about-me sections, etc --- */
.cards{max-width:1080px;margin:0 auto;
       padding:clamp(48px,9vw,88px) clamp(20px,5vw,48px) clamp(64px,10vw,112px);
       display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
/* --accent-vivid/--accent-pastel are set per-instance inline; --card-accent
   resolves to vivid normally, and to pastel on morning/afternoon (below). */
.card{--card-accent:var(--accent-vivid, var(--accent));--tilt:-1deg;position:relative;display:flex;flex-direction:column;gap:10px;
      min-height:200px;padding:28px 24px 24px;border-radius:22px;
      border:1px solid rgba(var(--surface-rgb),.14);background:rgba(var(--surface-rgb),.03);
      text-decoration:none;color:var(--ink);
      transition:transform .3s var(--spring),border-color .3s,background .3s}
a.card:hover,a.card:focus-visible{transform:translateY(-6px) rotate(var(--tilt));
      border-color:var(--card-accent);background:rgba(var(--surface-rgb),.06);outline:none}
:root[data-time="morning"] .card,:root[data-time="afternoon"] .card{
      --card-accent:var(--accent-pastel, var(--accent-vivid, var(--accent)))}
.card__tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.06em;
      text-transform:uppercase;padding:5px 10px;border-radius:999px;
      background:var(--card-accent);color:var(--tag-ink,#FFF1D6)}
/* pastel pills are all light — dark text reads better across the board */
:root[data-time="morning"] .card__tag,:root[data-time="afternoon"] .card__tag{color:#17140F}
.card__title{font-size:clamp(22px,3.2vw,28px);font-weight:600;letter-spacing:-.02em}
.card__desc{font-size:14px;color:var(--muted);line-height:1.45}
.card__arrow{margin-top:auto;padding-top:16px;display:inline-block;line-height:0;color:var(--card-accent);
      transition:transform .3s var(--spring)}
a.card:hover .card__arrow,a.card:focus-visible .card__arrow{transform:translateX(6px)}

/* a card with nothing to click through to yet */
.card--soon{opacity:.6}
.card--soon .card__tag{background:transparent;border:1px solid rgba(var(--surface-rgb),.3);color:var(--muted)}

/* --- empty state: a whole page that's still being written --- */
.empty-state{max-width:1080px;margin:clamp(48px,9vw,88px) auto 0;padding:0 clamp(20px,5vw,48px) clamp(64px,10vw,112px)}
.empty-state__frame{min-height:240px;border-radius:24px;
      border:1.5px dashed rgba(var(--surface-rgb),.25);background:rgba(var(--surface-rgb),.03);
      display:flex;align-items:center;justify-content:center;padding:48px 24px;text-align:center}
.empty-state__label{font-size:15px;color:var(--muted)}

/* --- say hi: contact icons --- */
.say-hi{max-width:1080px;margin:0 auto;padding:clamp(24px,5vw,48px) clamp(20px,5vw,48px) 0;
        display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.say-hi__title{font-size:clamp(32px,5.5vw,56px);font-weight:600;letter-spacing:-.03em;margin:0}
.say-hi__icons{display:flex;gap:14px}
/* same hover treatment as .card: lift + tilt + accent border + bg tint */
.say-hi__icon{--icon-accent:var(--accent);--tilt:-1deg;width:64px;height:64px;border-radius:8px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(var(--surface-rgb),.03);border:1px solid rgba(var(--surface-rgb),.14);
      color:var(--ink);text-decoration:none;
      transition:transform .3s var(--spring),border-color .3s,background .3s}
.say-hi__icon:hover,.say-hi__icon:focus-visible{transform:translateY(-6px) rotate(var(--tilt));
      border-color:var(--icon-accent);background:rgba(var(--surface-rgb),.06);outline:none}
.say-hi__icon svg{width:28px;height:28px}
.say-hi__icon--linkedin{font-size:24px;font-weight:700;letter-spacing:-.02em}

/* --- footer: a glow that shifts with the time of day, and the time toggle ---
   The glow is the exact exported Figma asset (assets/glow-*.svg, one per
   theme, opacity baked into each file) — not a recreated gradient. Only one
   is shown at a time; which one is picked purely by CSS off data-time. */
.site-footer{position:relative;height:215px;overflow:hidden;
      display:flex;justify-content:center;margin-top:clamp(24px,5vw,48px)}
.site-footer__glow-img{position:absolute;left:50%;top:10px;width:1508px;height:817px;
      transform:translateX(-50%);pointer-events:none;display:none}
.site-footer__glow-img.is-night{display:block} /* also the no-JS fallback */
:root[data-time="morning"] .site-footer__glow-img.is-night,
:root[data-time="afternoon"] .site-footer__glow-img.is-night,
:root[data-time="evening"] .site-footer__glow-img.is-night{display:none}
:root[data-time="morning"] .site-footer__glow-img.is-morning{display:block}
:root[data-time="afternoon"] .site-footer__glow-img.is-afternoon{display:block}
:root[data-time="evening"] .site-footer__glow-img.is-evening{display:block}
.site-footer__toggle{position:relative;z-index:1;margin-top:68px;width:40px;height:40px;
      background:none;border:none;padding:0;cursor:pointer;color:var(--ink);
      display:flex;align-items:center;justify-content:center}
.site-footer__toggle svg{transition:transform .3s var(--spring)}
.site-footer__toggle:hover svg,.site-footer__toggle:focus-visible svg{transform:scale(1.1)}
.site-footer__toggle:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:50%}
/* click transition: the icon spins/shrinks out, swaps, then springs back in — driven by assets/time-toggle.js toggling .is-swapping */
#time-toggle-icon{display:inline-block;line-height:0;transition:opacity .18s ease,transform .18s ease}
#time-toggle-icon.is-swapping{opacity:0;transform:scale(.5) rotate(-90deg)}

/* --- morning/afternoon: lighter surfaces on cards/buttons/video frame ---
   --surface-rgb is --ink's r,g,b, which works as a subtle tint on the dark
   evening/night papers (ink there is light cream). On morning/afternoon
   ink is dark, so the same trick made these surfaces read as a dark tint
   instead of light. Figma's own reference uses a plain white overlay for
   cards on these two light papers (rgba(255,255,255,.4) fill / .5 border),
   so these overrides switch to that instead of reusing --surface-rgb. */
:root[data-time="morning"] .card,:root[data-time="afternoon"] .card,
:root[data-time="morning"] .route,:root[data-time="afternoon"] .route{
      background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.55)}
:root[data-time="morning"] a.card:hover,:root[data-time="afternoon"] a.card:hover,
:root[data-time="morning"] a.card:focus-visible,:root[data-time="afternoon"] a.card:focus-visible,
:root[data-time="morning"] .route:hover,:root[data-time="afternoon"] .route:hover,
:root[data-time="morning"] .route:focus-visible,:root[data-time="afternoon"] .route:focus-visible{
      background:rgba(255,255,255,.55)}
:root[data-time="morning"] .say-hi__icon,:root[data-time="afternoon"] .say-hi__icon{
      background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.55)}
:root[data-time="morning"] .say-hi__icon:hover,:root[data-time="afternoon"] .say-hi__icon:hover,
:root[data-time="morning"] .say-hi__icon:focus-visible,:root[data-time="afternoon"] .say-hi__icon:focus-visible{
      background:rgba(255,255,255,.55)}
:root[data-time="morning"] .video-intro__frame,:root[data-time="afternoon"] .video-intro__frame,
:root[data-time="morning"] .empty-state__frame,:root[data-time="afternoon"] .empty-state__frame{
      background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion: reduce){
  .nav__mark,.nav__links a,.card,.card__arrow,.say-hi__icon,.site-footer__toggle svg,#time-toggle-icon{transition:none}
  .nav__mark:hover,.nav__mark:focus-visible,
  .nav__links a:hover,.nav__links a:focus-visible{transform:none}
  a.card:hover,a.card:focus-visible{transform:none}
  a.card:hover .card__arrow,a.card:focus-visible .card__arrow{transform:none}
  .say-hi__icon:hover,.say-hi__icon:focus-visible{transform:none}
  .site-footer__toggle:hover svg,.site-footer__toggle:focus-visible svg{transform:none}
  #time-toggle-icon.is-swapping{opacity:1;transform:none}
}
