/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — tokens + shared components for unifying the
   home page and the inner (case-study) pages.

   STATUS: not linked from any page yet. This is the foundation for
   a future migration — index.html, the case-study pages, work.html,
   play.html, about.html etc. all still carry their own inline
   styles and are untouched by this file. Nothing here can break the
   live site until a page actually adds:
     <link rel="stylesheet" href="shared/design-system-v2.css">

   This is intentionally separate from shared/design-system.css
   (the older, narrower stylesheet already linked by contact-rates,
   tamara-help-center and tamara-web-app) — that file isn't touched
   or referenced here, so migrating onto v2 later is opt-in per page
   and doesn't risk the pages already depending on v1.

   Tokens below are pulled from what's already consistent between
   index.html (home) and the case-study template (tamara-smart.html
   / revenue-recognition.html) — e.g. both already share the exact
   same nav-pill CSS and the same dark footprint footer, copied
   between pages by hand. .ds-nav-pill and .ds-footer-dark below are
   that same CSS, named so it can be included once instead of
   copy-pasted per page.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ──
     Home uses a warm off-white; case studies use plain white. Both
     are real, intentional surfaces — pick per page, not a forced
     single background. */
  --ds-surface-warm: #faf8f3;   /* home page background */
  --ds-surface-white: #ffffff;  /* case-study page background, card fills */

  /* ── Text ── */
  --ds-text-primary: #0d0d0d;
  --ds-text-secondary: #5d5d5d;
  --ds-text-muted: rgba(50, 64, 79, 0.58);
  --ds-text-on-dark: #f9f8f6;
  --ds-text-on-dark-muted: #b2b2b2;

  /* ── Accent / semantic ── */
  --ds-accent: #603FD6;         /* CTAs, link hover — shared everywhere */
  --ds-accent-blue: #055fa8;    /* case-study section eyebrows */
  --ds-accent-blue-light: #acd5f6; /* home hero + footer hover state */
  --ds-success: #059c2d;

  /* ── Borders ── */
  --ds-border: rgba(33, 33, 33, 0.10);
  --ds-border-nav: #e1e2e2;

  /* ── Typography ──
     Home leans on Inter/IBM Plex Mono/Figtree; case studies lean on
     DM Sans/DM Mono. Both families are declared so a component (like
     .ds-nav-pill) can be dropped into either context unchanged. */
  --ds-font-body: "Inter", sans-serif;
  --ds-font-display: "Inter Display", "Inter", sans-serif;
  --ds-font-mono: "IBM Plex Mono", monospace;
  --ds-font-case-body: "DM Sans", sans-serif;
  --ds-font-case-mono: "DM Mono", monospace;

  --ds-text-xs: 12px;
  --ds-text-sm: 14px;
  --ds-text-base: 15px;
  --ds-text-md: 18px;
  --ds-text-lg: 22px;
  --ds-text-xl: 26px;
  --ds-text-2xl: 30px;

  /* ── Spacing scale ── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 40px;
  --ds-space-8: 64px;

  /* ── Radii ── */
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 24px;
  --ds-radius-pill: 999px;

  /* ── Shadows ── */
  --ds-shadow-card: 0px 0px 0px 1px rgba(11, 11, 11, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.065);
  --ds-shadow-nav: 0 5px 10px rgba(0, 0, 0, 0.05);
  --ds-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.07);
}

/* ═══════════════════════════════════════
   NAV PILL
   Identical markup/behavior already shared by hand between
   index.html and every case-study page:
   <header class="site-header">
     <nav class="ds-nav-pill">
       <a href="..." class="ds-nav-item [active]">Home</a>
       ...
     </nav>
   </header>
   ═══════════════════════════════════════ */
.ds-site-header {
  position: sticky;
  top: 40px;
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ds-nav-pill {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: var(--ds-surface-white);
  border: 1px solid var(--ds-border-nav);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-nav);
  pointer-events: all;
}
.ds-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10.5px 18px;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: #4d4d4d;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.ds-nav-item:hover { background: rgba(0, 0, 0, 0.05); }
.ds-nav-item.active { background: #000; color: #fff; }

/* ═══════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════ */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 14px 20px;
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.ds-button--primary { background: #000; color: #fff; }
.ds-button--primary:hover { background: #222; }
.ds-button--accent { background: var(--ds-accent); color: #fff; }
.ds-button--accent:hover { background: #4f34b3; }
.ds-button--secondary {
  background: transparent;
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-border-nav);
}
.ds-button--secondary:hover { background: rgba(0, 0, 0, 0.04); }

/* ═══════════════════════════════════════
   CARD
   General-purpose elevated card (home's project entries and the
   case-study "more projects" grid are both variations of this — use
   .ds-card as the base and override radius/shadow per context, e.g.
   the case-study more-card intentionally drops both per Figma).
   ═══════════════════════════════════════ */
.ds-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ds-surface-white);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ds-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-hover); }
.ds-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #f0f0f0; }
.ds-card-media img,
.ds-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-card-body { padding: var(--ds-space-4); display: flex; flex-direction: column; gap: var(--ds-space-1); }
.ds-card-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a6a6a6;
}
.ds-card-title { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-text-primary); }

/* ═══════════════════════════════════════
   FOOTER (dark) — same "leave your mark" footprint footer already
   shared byte-for-byte between index.html and every case-study page.
   Markup:
   <footer class="ds-footer-dark">
     <div class="ds-footer-inner-wrap">
       <div class="ds-footer-top"> ... tagline/credit + link cols ... </div>
       <div class="ds-footer-footprints" data-footprints></div>
       <p class="ds-footer-bottom">© ...</p>
     </div>
   </footer>
   Pair with home/footer-footprints.js for the interactive field —
   this file only supplies the chrome, not the ambient/stamp behavior.
   ═══════════════════════════════════════ */
.ds-footer-dark { background: #000000; }
.ds-footer-inner-wrap {
  max-width: 1920px;
  margin: 0 auto;
  padding: 79px min(5.313%, 102px);
}
.ds-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-7);
}
.ds-footer-tagline {
  font-family: var(--ds-font-body);
  font-weight: 200;
  font-size: var(--ds-text-2xl);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ds-text-on-dark);
  max-width: 336px;
}
.ds-footer-credit {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: 0.01em;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--ds-text-on-dark-muted);
  margin-top: 10px;
  max-width: 336px;
}
.ds-footer-links { display: flex; gap: var(--ds-space-8); }
.ds-footer-link-col { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ds-footer-link-heading {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #eae8e3;
  text-decoration: none;
}
a.ds-footer-link-heading:hover { color: var(--ds-accent-blue-light); }
.ds-footer-link-col a {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #666666;
  text-decoration: none;
  transition: color 200ms;
}
.ds-footer-link-col a:hover { color: var(--ds-accent-blue-light); }
.ds-footer-footprints {
  position: relative;
  width: 100%;
  height: 274px;
  margin-top: 20px;
  overflow: hidden;
}
.ds-footer-bottom {
  margin-top: 28px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: #595959;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ds-footer-inner-wrap { padding: 48px 20px; }
  .ds-footer-top { flex-direction: column; gap: var(--ds-space-6); }
  .ds-footer-links { gap: var(--ds-space-6); }
  .ds-footer-footprints { height: 180px; }
}

/* ═══════════════════════════════════════
   MORE PROJECTS
   Case-study "you might also like" grid, capped at 2 cards per
   page. Figma-verbatim: no radius, no border, no card background —
   the thumb is 5:3 contain-fit so both 1:1 video sources and wider
   screenshots sit un-cropped.
   Markup:
   <div class="ds-more-section">
     <div class="ds-more-title">More projects</div>
     <div class="ds-more-grid">
       <a class="ds-more-card" href="...">
         <div class="ds-more-card-thumb"><img|video .../></div>
         <div class="ds-more-card-body">
           <div class="ds-more-card-meta">Product Designer · 2024</div>
           <div class="ds-more-card-title">...</div>
         </div>
       </a>
       <!-- exactly one more -->
     </div>
   </div>
   ═══════════════════════════════════════ */
.ds-more-section { margin-top: 0; }
.ds-more-title {
  font-family: var(--ds-font-case-body);
  font-size: var(--ds-text-md); font-weight: 600;
  margin-bottom: var(--ds-space-5); color: var(--ds-text-primary);
}
.ds-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-4); }
.ds-more-card {
  display: block; text-decoration: none; border-radius: 0; overflow: hidden;
  background: transparent; border: none;
}
.ds-more-card-thumb { aspect-ratio: 5/3; overflow: hidden; background: #f0f0f0; }
.ds-more-card-thumb.thumb-tamara-smart { background: #D2D2FF; }
.ds-more-card-thumb.thumb-contact-rates { background: #ACD4F5; }
.ds-more-card-thumb img, .ds-more-card-thumb video { width: 100%; height: 100%; object-fit: contain; }
/* Tamara Web App thumb: the source image is narrower than the 5:3
   box, so contain-fit letterboxes on the sides — cover-fit fills the
   frame instead (crops top/bottom slightly, no visible background). */
.ds-more-card-thumb.thumb-tamara-webapp img { object-fit: cover; }
.ds-more-card-body { padding: 14px 14px 14px 0; }
.ds-more-card-meta {
  font-family: var(--ds-font-case-mono);
  font-size: 11px; color: #a6a6a6; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 4px;
}
.ds-more-card-title {
  font-family: var(--ds-font-case-body);
  font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-text-primary);
}
@media (max-width: 900px) {
  .ds-more-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   CURSOR — shared trailing-dot + hover-label
   custom cursor, used site-wide via shared/cursor.js
   so every page has the identical look/behavior
   instead of each page's own copy (home used a light
   dot + dark label pill, play used a bright-blue pill
   with no dot — this replaces both).
   ═══════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  html { cursor: none; }
}
.ds-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ACD5F6;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.ds-cursor-dot.show { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
.ds-cursor-dot.show.down { transform: translate(-50%, -50%) scale(0.7); }
.ds-cursor-label-wrap {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ds-cursor-label-wrap.visible { opacity: 1; }
.ds-cursor-label {
  background: #2339DD;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}