/* ============
BOX MODEL RESET 
=============== */

/* Stripping browser defaults to ensure every "gift box" behaves predictably across all devices. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ======
FONT FACE
========= */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: 100 900; /* The range '100 900' enables the full spectrum of weights in a single file */
  font-style: normal;
  font-display: swap; /* A11Y: Shows fallback font while Inter loads */
}

/* =================
DESIGN TOKEN VAULT ↓
Purpose: Centralized "storage room" for all project variables.
==================== */
:root {
  /* ---------------
    SPACING TOKENS ↓
  ------------------ */
  /* PRIMITIVE: The raw "tape measure" units.
    Baseline: 100 units = 8px (0.5rem). */
  --sp-50: 0.25rem; /* 4px */
  --sp-100: 0.5rem; /* 8px */
  --sp-110: 0.6875rem; /* 11px (attribution) */
  --sp-150: 0.75rem; /* 12px */
  --sp-175: 0.875rem; /* 14px (Style Guide Paragraph) */
  --sp-200: 1rem; /* 16px */
  --sp-300: 1.5rem; /* 24px */
  --sp-500: 2.5rem; /* 40px */
  --sp-1100: 5.5rem; /* 88px (Avatar Dimension) */
  --sp-4000: 20rem; /* 320px (Mobile Min-Width) */
  --sp-4800: 24rem; /* 384px (Desktop Max-Width) */

  /* SEMANTIC: The "role" these measurements play in the layout. */
  /* FONT SIZE */
  --fs-11: var(--sp-110); /* 11px */
  --fs-14: var(--sp-175); /* 14px */
  --fs-24: var(--sp-300); /* 24px */

  /* WIDTHS */
  --wd-card: clamp(
    var(--sp-4000),
    90vw,
    var(--sp-4800)
  ); /* 320-384px 90% viewport width */
  --wd-avatar: var(--sp-1100); /* 88px */

  /* BORDER RADIUS */
  --br-card: var(--sp-150);
  --br-btn: var(--sp-100);
  --br-avatar: 50%;
  --br-attribution: var(--sp-50);

  /* MARGINS */
  --mrg-name: var(--sp-300) 0 var(--sp-50);
  --mrg-location: var(--sp-300);
  --mrg-bio: var(--sp-300);
  --mrg-attribution: var(--sp-150);

  /* PADDINGS */
  --pd-btn: var(--sp-150);

  /* ---------------
    SPACING TOKENS ↑
  ------------------ */

  /* ------------------
    TYPOGRAPHY TOKENS ↓
  --------------------- */
  /* FONT FAMILY */
  --ff-inter: "Inter", sans-serif;

  /* FONT WEIGHT */
  --fw-400: 400; /* We precisely define only the weights required by the style guide */
  --fw-600: 600;
  --fw-700: 700;

  /* LINE HEIGHT */
  --lh-150: 1.5;

  /* TEXT DECORATION */
  --td-btn: none;

  /* LIST STYLE TYPE */
  --lst-ul: none;

  /* ------------------
    TYPOGRAPHY TOKENS ↑
  --------------------- */

  /* COLOR PALETTE */
  --clr-green: hsl(75, 94%, 57%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-grey-700: hsl(0, 0%, 20%);
  --clr-grey-800: hsl(0, 0%, 12%);
  --clr-grey-900: hsl(0, 0%, 8%);

  /* ------------------
    INTERACTION TOKENS ↓
  --------------------- */

  /* TRANSITION */
  --tr-entry:
    background-color 0.1s ease-out, color 0.1s ease-out; /* Snappy, immediate feedback */
  --tr-exit:
    background-color 0.5s ease-in-out, color 0.5s ease-in-out; /* Smooth, elegant return */
}
/* =================
DESIGN TOKEN VAULT ↑
==================== */

/* =======================
SOCIAL LINKS CARD DESIGN ↓
========================== */

body {
  /* 1. Layout Context: Orchestrating the viewport center */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 2. Box Model: Safety zone and full viewport height */
  min-height: 100vh;
  /* 3. Typography: Inheritable text properties */
  font-family: var(--ff-inter);
  line-height: var(--lh-150);
  text-align: center;
  /* 4. Visuals */
  background-color: var(--clr-grey-900);
}

.social-card {
  /* 2. Box Model */
  width: var(--wd-card);
  padding: var(--sp-500);
  /* 4. Visuals */
  background-color: var(--clr-grey-800);
  border-radius: var(--br-card);
}

.social-card__avatar {
  /* 1. Layout Context */
  display: block;
  /* 2. Box Model */
  width: var(--wd-avatar);
  /* 4. Visuals */
  border-radius: var(--br-avatar);
}

.social-card__name {
  margin: var(--mrg-name);
  font-size: var(--fs-24);
  font-weight: var(--fw-400);
  color: var(--clr-white);
}

.social-card__location {
  margin-bottom: var(--mrg-location);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--clr-green);
}

.social-card__bio {
  margin-bottom: var(--mrg-bio);
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  color: var(--clr-white);
}

.social-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-200);
  list-style-type: var(--lst-ul); /* remove bullet points */
}

.social-card__btn {
  display: block;
  padding: var(--pd-btn);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  background-color: var(--clr-grey-700);
  color: var(--clr-white);
  border-radius: var(--br-btn);
  text-decoration: var(--td-btn);
  transition: var(
    --tr-exit
  ); /* smooth return to its original state when the mouse leaves */
}

/* --------------
    HOVER STATE ↓
  --------------- */
.social-card__btn:hover,
.social-card__btn:focus-visible {
  background-color: var(--clr-green);
  color: var(--clr-grey-700);
  transition: var(
    --tr-entry
  ); /* Snappy active state change when the mouse enters  */
}

.attribution a:hover,
.attribution a:focus-visible {
  border-radius: var(--br-attribution);
  background-color: var(--clr-green);
  color: var(--clr-grey-700);
  transition: var(
    --tr-entry
  ); /* Snappy active state change when the mouse enters  */
}

/* --------------
    HOVER STATE ↑
  --------------- */

.attribution {
  margin: var(--mrg-attribution);
  font-size: var(--fs-11);
  text-align: center;
  color: var(--clr-white);
}
.attribution a {
  text-decoration: none;
  font-weight: var(--fw-700);
  color: var(--clr-white);
  transition: var(
    --tr-exit
  ); /* smooth return to its original state when the mouse leaves */
}

/* =======================
SOCIAL LINKS CARD DESIGN ↑
========================== */