/* ==========================================================================
   base.css — Design tokens & reusable basics
   Extracted from Figma "FOR DEV :D" (Portfolio--25)
   Keep project-wide primitives here for reusability.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
/* Space Grotesk (body face) is loaded from Google Fonts.
   Neue Montreal (display face) is loaded locally from assets/fonts/ below. */
/* Space Grotesk — self-hosted variable font (weights 300–700) used for body
   text, labels and the identity role. Single WOFF2 covers all weights. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Neue Montreal — the display typeface used for headings in the design.
   (Pangram Pangram free demo: Regular / Medium / Bold.) */
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Color (from Figma variables) */
  --color-white: #f8fafc;
  --color-black: #020617;
  --color-ink: #050503;
  --color-ink-rail: #050505;   /* exact Figma color for the HOME PAGE side label */
  --color-grey-dark: #334155;
  --color-grey-medium: #5a6b84;
  --color-grey-light: #94a3b8;
  --color-grey-super-light: #e2e8f0;

  /* CMYK accent trio (used for the glow behind buttons & the logo star) */
  --color-cyan: #00ffff;
  --color-magenta: #ff00ff;
  --color-yellow: #ffff00;

  /* Typography */
  --font-display: "Neue Montreal", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;

  /* Type scale (px values from the Figma type styles) */
  --fs-display-medium: 44px;   /* line 52 / weight 500 */
  --fs-display-small: 32px;    /* line 40 / weight 400 */
  --fs-header-medium: 32px;    /* line 40 / weight 700 */
  --fs-body-casual: 18px;      /* line 26 / weight 400 */
  --fs-button: 18px;           /* line 26 / weight 700 */
  --fs-tag: 14px;              /* line 24 / weight 400 */
  --fs-label: 16px;            /* line 24 / weight 400 — vertical side labels */

  /* Spacing / layout */
  --sidebar-w: 422px;          /* width of the left rail in the desktop design */
  --page-max: 1512px;
  --radius-pill: 87px;
  --radius-btn: 50px;
  --radius-card: 12px;

  /* Misc */
  --line-color: var(--color-grey-light);
  --strike-color: var(--color-grey-light);
}

/* ---- Reset / base ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-casual);
  line-height: 1.45;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset default margins that the browser applies to common block elements.
   (Previously handled by Tailwind's Preflight; now done here.) */
figure,
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

/* ---- Reusable utilities ------------------------------------------------- */

/* Visually hidden but accessible to screen readers */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Strike-through text token used in the headline */
.u-strike {
  color: var(--strike-color);
  text-decoration: line-through;
  text-decoration-thickness: from-font;
}

/* Display / heading helpers */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-medium);
  line-height: 52px;
  letter-spacing: 0;
}

.t-subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-small);
  line-height: 40px;
}

.t-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-header-medium);
  line-height: 40px;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-casual);
  line-height: 26px;
}

/* Pill tag (skills) */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-grey-super-light);
  color: var(--color-grey-dark);
  font-size: var(--fs-tag);
  line-height: 24px;
  white-space: nowrap;
}

/* Playful tilt for the "Dogs" tag (matches Figma) */
.tag--tilt {
  transform: rotate(-15deg);
}

/* CMYK glow buttons (LINKEDIN / MY RESUME / COPY EMAIL).
   Each button uses its OWN pill artwork exported from Figma ("Group 318"): three
   CMYK pills (magenta / yellow / cyan, multiply-blended) with a black pill on
   top. The exact vector art is embedded as the button background (text path
   stripped) and real, accessible Space Grotesk text is laid on top. Each button
   has its own intrinsic width so the rounded pill ends are never distorted. */
.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-button);
  line-height: 26px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* LINKEDIN — 133 x 50 */
.btn-glow--linkedin {
  width: 133px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133' height='50' viewBox='0 0 133 50' fill='none'%3E%3Crect width='122.36' height='45.745' rx='22.8725' transform='matrix(-1 0 0 1 127.68 4.25488)' fill='%23FF00FF' style='mix-blend-mode:multiply'/%3E%3Crect width='122.36' height='45.745' rx='22.8725' transform='matrix(-1 0 0 1 133 0)' fill='%23FFFF00' style='mix-blend-mode:multiply'/%3E%3Crect width='122.36' height='45.745' rx='22.8725' transform='matrix(-1 0 0 1 122.36 0)' fill='%2300FFFF' style='mix-blend-mode:multiply'/%3E%3Cpath d='M6.00024 25C6.00024 13.402 15.4023 4 27.0002 4H102C113.598 4 123 13.402 123 25C123 36.598 113.598 46 102 46H27.0002C15.4023 46 6.00024 36.598 6.00024 25Z' fill='%23020617'/%3E%3C/svg%3E");
}

/* MY RESUME — 157 x 50 */
.btn-glow--resume {
  width: 157px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='157' height='50' viewBox='0 0 157 50' fill='none'%3E%3Crect x='150.72' y='45.7451' width='144.44' height='45.745' rx='22.8725' transform='rotate(-180 150.72 45.7451)' fill='%23FF00FF' style='mix-blend-mode:multiply'/%3E%3Crect x='157' y='50' width='144.44' height='45.745' rx='22.8725' transform='rotate(-180 157 50)' fill='%23FFFF00' style='mix-blend-mode:multiply'/%3E%3Crect x='144.44' y='50' width='144.44' height='45.745' rx='22.8725' transform='rotate(-180 144.44 50)' fill='%2300FFFF' style='mix-blend-mode:multiply'/%3E%3Cpath d='M8 25C8 13.402 17.402 4 29 4H129C140.598 4 150 13.402 150 25C150 36.598 140.598 46 129 46H29C17.402 46 8 36.598 8 25Z' fill='%23020617'/%3E%3C/svg%3E");
}

/* COPY EMAIL — 167 x 50 */
.btn-glow--email {
  width: 167px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='167' height='50' viewBox='0 0 167 50' fill='none'%3E%3Crect width='153.64' height='45.745' rx='22.8725' transform='matrix(1 -8.74228e-08 -8.74228e-08 -1 6.67993 45.7451)' fill='%23FF00FF' style='mix-blend-mode:multiply'/%3E%3Crect width='153.64' height='45.745' rx='22.8725' transform='matrix(1 -8.74228e-08 -8.74228e-08 -1 0 50)' fill='%23FFFF00' style='mix-blend-mode:multiply'/%3E%3Crect width='153.64' height='45.745' rx='22.8725' transform='matrix(1 -8.74228e-08 -8.74228e-08 -1 13.3601 50)' fill='%2300FFFF' style='mix-blend-mode:multiply'/%3E%3Cpath d='M13 24C13 12.402 22.402 3 34 3H134C145.598 3 155 12.402 155 24C155 35.598 145.598 45 134 45H34C22.402 45 13 35.598 13 24Z' fill='%23020617'/%3E%3C/svg%3E");
}

.btn-glow:hover {
  transform: translateY(-2px);
}

.btn-glow:focus-visible {
  outline: 2px solid var(--color-grey-medium);
  outline-offset: 3px;
}