/* Design tokens, from the Figma style guide (Portfolio – Student ACC, node 4-30) */
:root {
  /* Colors: style guide palette */
  --color-ink: #151515;         /* main text, outlines, chips */
  --color-bg: #f0ebeb;          /* page background */
  --color-panel: #d5cfcf;       /* expanded "Section Detail" panels */
  --color-muted: #a69e9e;       /* tags, dividers */
  --color-ink-soft: #474747;    /* meta text, footer */
  --color-accent: #890700;      /* brand red from the logo: focus and hover */

  /* Colors: project-specific, not part of the style guide */
  --color-card: #f2f2f2;        /* project card background */
  --color-wisp: #29516b;        /* Wisp Calendar accent text */

  /* Typography: Poppins Black and Regular only */
  --font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-black: 900;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 24px;
  --fs-xl: 32px;

  --lh-base: 1.5;

  /* Type styles (font shorthand) */
  --type-h1: var(--fw-black) var(--fs-xl) / var(--lh-base) var(--font-family);
  --type-h2: var(--fw-black) var(--fs-lg) / var(--lh-base) var(--font-family);
  --type-h3: var(--fw-regular) var(--fs-lg) / var(--lh-base) var(--font-family);
  --type-body-strong: var(--fw-black) var(--fs-base) / var(--lh-base) var(--font-family);
  --type-body: var(--fw-regular) var(--fs-base) / var(--lh-base) var(--font-family);
  --type-small: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-family);

  /* Layout */
  --container: 954px;
  --container-wide: 1103px;
  --gutter: 32px;

  /* Shape */
  --radius-pill: 20px;
  --radius-card: 20px;
  --radius-toggle: 10px;
  --shadow-tag: 0 2px 4px rgb(21 21 21 / 0.15);

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 60px;
  --space-6: 80px;
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
  }
}