/* Urbanist + Poppins: the same Fontshare builds the live Framer site loads (self-hosted).
   Google Fonts stays in the stack as a fallback. */
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "UrbanistFS"; src: url("../assets/fonts/urbanist-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PoppinsFS"; src: url("../assets/fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "PoppinsFS"; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PoppinsFS"; src: url("../assets/fonts/poppins-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PoppinsFS"; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PoppinsFS"; src: url("../assets/fonts/poppins-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* ==========================================================
   haritaks.com design tokens
   Source: Framer color + text styles, verified against live site
   ========================================================== */

:root {
  /* ---------- Color: base ---------- */
  --color-ink:        #101010;                   /* 01               */
  --color-cream:      #EAEAE0;                   /* 02               */
  --color-cream-30:   rgba(234, 234, 224, 0.30); /* 03               */
  --color-cream-65:   rgba(234, 234, 224, 0.65); /* 04               */
  --color-cream-50:   rgba(234, 234, 224, 0.50); /* 05               */
  --color-cream-10:   rgba(234, 234, 224, 0.10); /* 06               */
  --color-ink-50:     rgba(16, 16, 16, 0.50);    /* 07 overlays      */
  --color-cream-16:   rgba(234, 234, 224, 0.16); /* 08 (was EBEBE1)  */
  --color-accent:     #F2336F;                   /* Accent           */
  --color-accent-75:  rgba(242, 51, 111, 0.75);  /* Accent 2         */
  --color-ink-deep:   #070707;                   /* unnamed in Framer, used on site */

  /* ---------- Off-system colors the live site uses ----------
     Kept so the rebuild matches Framer exactly. Candidates to fold into your system. */
  --color-offwhite:    #FAFAFA;                  /* footer text (vs 02 cream)      */
  --color-offwhite-70: rgba(250, 250, 250, 0.70);
  --nav-line:          rgba(255, 255, 255, 0.08); /* nav bottom line (vs 06)        */

  /* ---------- Color: semantic (use these in components) ---------- */
  --surface:          var(--color-ink);
  --surface-deep:     var(--color-ink-deep);
  --text-primary:     var(--color-cream);
  --text-secondary:   var(--color-cream-65);
  --text-tertiary:    var(--color-cream-50);
  --border:           var(--color-cream-10);
  --border-strong:    var(--color-cream-16);
  --overlay:          var(--color-ink-50);
  --tag-bg:           var(--color-cream-30);
  --accent:           var(--color-accent);
  --button-bg:        var(--color-accent-75);

  /* ---------- Typography ---------- */
  --font-sans:    "UrbanistFS", "Urbanist", system-ui, sans-serif;  /* body, projects, nav        */
  --font-display: "Inter", system-ui, sans-serif;     /* hero + "Selected Work"    */
  --font-footer:  "PoppinsFS", "Poppins", system-ui, sans-serif;   /* footer, mobile Beyond title */

  /* Desktop values from Framer; clamp() scales down to mobile */
  --h1-size: clamp(56px, 8vw, 96px);   --h1-lh: 1;
  --h2-size: clamp(44px, 6vw, 72px);   --h2-lh: 1.1;
  --h3-size: clamp(32px, 4vw, 48px);   --h3-lh: 1.2;
  --h4-size: clamp(22px, 2.4vw, 28px); --h4-lh: 1.3;
  --b1-size: 18px;                     --b1-lh: 1.6;
  --label-size: 16px;                  --label-lh: 1.2;  /* used 22x on live site, not in Framer scale */
  --btn-size: 14px;                    --btn-lh: 1;
  --t1-size: 12px;                     --t1-lh: 2;

  /* ---------- Shape ---------- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-pill: 30px;

  /* ---------- Breakpoints (reference, Framer's) ----------
     tablet: 810px - 1199px | mobile: < 810px */
}

/* ---------- Type classes ---------- */
body { margin: 0; background: var(--surface); color: var(--text-primary); font-family: var(--font-sans); }

.h1    { font-size: var(--h1-size);    line-height: var(--h1-lh);    font-weight: 400; }
.h2    { font-size: var(--h2-size);    line-height: var(--h2-lh);    font-weight: 400; }
.h3    { font-size: var(--h3-size);    line-height: var(--h3-lh);    font-weight: 400; }
.h4    { font-size: var(--h4-size);    line-height: var(--h4-lh);    font-weight: 600; }
.b1    { font-size: var(--b1-size);    line-height: var(--b1-lh);    font-weight: 400; }
.label { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; letter-spacing: 1px; }
.btn   { font-size: var(--btn-size);   line-height: var(--btn-lh);   font-weight: 600; }
.t1    { font-size: var(--t1-size);    line-height: var(--t1-lh);    font-weight: 600; }