/* ==========================================================================
   Design tokens
   Every value here was measured from the live Framer build via computed
   styles, so this file is the single source of truth for the whole site.
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --c-bg:            #f4f1ea;  /* page + card background */
  --c-surface:       #ffffff;  /* nav pill, social buttons */
  --c-ink:           #22201b;  /* footer, Let's Chat button */
  --c-ink-alt:       #1e1e1e;  /* Resume button */

  /* --- Text --- */
  --c-text:          #666666;  /* body copy, captions */
  --c-heading:       #4b4b4b;  /* h1, "Let's connect" */
  --c-title:         #000000;  /* card titles, "My recent work" */
  --c-on-dark:       #ffffff;
  --c-footer-head:   #e3e3e3;

  /* --- Lines --- */
  --c-line:          #cfd6d8;  /* nav pill 0.5px, cards 1px */
  --c-line-arrow:    #e1e1e1;  /* arrow button */
  --c-line-pill:     #383838;  /* footer tag pills */
  --c-line-chat:     #333333;  /* Let's Chat button */
  --c-line-footer:   #f2f2f2;  /* footer top hairline */
  --c-icon-arrow:    rgb(30, 30, 30);
  --c-icon-social:   rgb(153, 153, 153);

  /* --- Type families --- */
  --f-display: "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-label:   "Manrope", sans-serif;
  --f-ui:      "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale (desktop; overridden at <810px) --- */
  --t-h1-size: 32px;
  --t-h1-line: 48px;

  --t-h2-size: 16px;
  --t-h2-line: 20.8px;
  --t-h2-track: -0.48px;

  --t-h3-size: 24px;
  --t-h3-line: 31.2px;
  --t-h3-track: -0.72px;

  --t-body-size: 14px;
  --t-body-line: 21px;

  --t-nav-size: 14px;
  --t-nav-line: 22.4px;

  --t-connect-size: 32px;
  --t-connect-line: 48px;

  --t-pill-size: 14px;
  --t-pill-line: 22.4px;

  --t-copy-size: 14px;

  /* --- Layout --- */
  --w-column:    640px;   /* hero, nav, work list, connect */
  --w-shell:     1120px;  /* work section max width */
  --w-h1:        475px;
  --w-hero-sub:  530px;

  --gap-section:  100px;  /* vertical rhythm between blocks */
  --pad-page:     20px 6px 6px;

  --card-radius:  16px;
  --card-img-h:   360px;
  --card-sticky-top: 32px;
  --card-gap:     60px;

  --blur-bar-h:   24px;

  /* --- Hover palette (Framer motion variants) --- */
  --c-hover-surface: rgb(237, 233, 222); /* cards + social tiles on hover */
  --c-hover-line:    rgb(203, 187, 154); /* hover border */
  --c-hover-nav:     rgb(245, 245, 245); /* nav link pill */
  --c-hover-resume:  rgb(38, 38, 38);    /* Resume button */
  --c-hover-arrow:   rgba(34, 32, 27, 0.1);
  --c-headline-dim:  rgb(179, 179, 179); /* headline text while hovered */

  /* --- Motion --- */
  /* Framer source: {type:"spring", duration:.45, bounce:.25, delay:.035} */
  --e-spring:     cubic-bezier(0.22, 1.2, 0.36, 1);
  --d-headline:   450ms;
  --stagger:      35ms;
  --card-scale-min: 0.9;

  /* Every hover in the original: {type:"spring", duration:.4, bounce:.2} */
  --e-hover:      cubic-bezier(0.25, 1.15, 0.4, 1);
  --d-hover:      400ms;
}

@media (max-width: 809.98px) {
  :root {
    --t-h1-size: 24px;
    --t-h1-line: 36px;

    --t-h2-size: 14px;
    --t-h2-line: 18.2px;
    --t-h2-track: -0.42px;

    --t-pill-size: 12px;
    --t-copy-size: 12px;

    --gap-section: 80px;
    --pad-page: 16px 6px 6px;

    --card-img-h: 200px;
    --blur-bar-h: 18px;
  }
}