/* ==========================================================================
   DESIGN TOKENS
   Source: Figma "New portfolio design" -> Design-system/011 foundations frame,
   transcribed via Claude Design. See the "New portfolio design.fig" file for
   the original swatches.
   ========================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("./fonts/YoungSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/Instrument_Sans_InstrumentSans-VariableFont_wdth-wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/Instrument_Sans_InstrumentSans-Italic-VariableFont_wdth-wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Neutrals ---- */
  --gray-0: rgb(255, 255, 255);
  --gray-950: rgb(16, 18, 20);
  --gray-1000: rgb(0, 0, 0);
  --gray-stroke-soft: rgb(233, 235, 248);
  --gray-stroke-medium: rgb(217, 217, 217);
  --gray-stroke-firm: rgb(202, 196, 208);
  --gray-text-muted: rgb(142, 152, 168);
  --gray-text-soft: rgb(117, 113, 113);

  /* ---- Burgundy / Violet ramp (primary brand color) ---- */
  --violet-light: #eee6ec;
  --violet-light-hover: #e5d9e3;
  --violet-light-active: #c9b1c5;
  --violet-normal: #510245;
  --violet-normal-hover: #49023e;
  --violet-normal-active: #410237;
  --violet-dark: #3d0234;
  --violet-dark-hover: #310129;
  --violet-dark-active: #24011f;
  --violet-darker: #1c0118;

  /* ---- Yellow ramp (secondary accent) ---- */
  --yellow-light: #fefbed;
  --yellow-light-hover: #fefae4;
  --yellow-light-active: #fdf4c6;
  --yellow-normal: #f9db48;
  --yellow-normal-hover: #e0c541;
  --yellow-normal-active: #c7af3a;
  --yellow-dark: #bba436;
  --yellow-dark-hover: #95832b;
  --yellow-dark-active: #706320;
  --yellow-darker: #574d19;

  --blue-accent: #414b59;
  --orange-accent: #592300;

  /* ---- Semantic aliases ---- */
  --color-bg-page: var(--gray-0);
  --color-bg-card: var(--gray-0);
  --color-text-primary: var(--gray-1000);
  --color-text-secondary: var(--gray-text-soft);
  --color-text-caption: var(--gray-text-muted);
  --color-border-hairline: var(--gray-stroke-soft);
  --color-border-firm: var(--gray-stroke-firm);

  --color-brand-primary: var(--violet-normal-active);
  --color-brand-primary-hover-bg: var(--violet-light-hover);
  --color-brand-primary-hover-text: var(--violet-dark-active);
  --color-brand-primary-text: var(--gray-0);

  /* ---- Type scale (base 24, ratio 1.25) ---- */
  --display-01: 92px;
  --display-02: 73px;
  --display-03: 59px;
  --display-04: 47px;
  --display-05: 38px;
  --display-06: 30px;
  --display-07: 24px;
  --display-08: 19px;
  --display-09: 15px;

  --text-button: 24px;
  --text-body: 16px;
  --text-caption: 12px;
  --text-micro: 10px;
  --text-label: 14px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;

  --letter-spacing-button: 0.7px;

  --font-display-serif: "Young Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-display-alt: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Spacing & radius ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  --radius-swatch: 12px;
  --radius-badge: 7px;
  --radius-button-hover: 20px;
  --radius-button-hover-inner: 15px;
  --radius-card: 12px;
  --radius-button-idle: 0px;
}