/* ==========================================================================
   Design Tokens — Jessi Queen Portfolio
   Source: Figma "AI trials - Design System" (Foundations page)
   ========================================================================== */

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../assets/fonts/AlteHaasGroteskRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../assets/fonts/AlteHaasGroteskBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modum';
  src: url('../assets/fonts/Modum-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* JUST Sans font files not yet supplied — drop JUST-Sans-Regular.woff2 and
   JUST-Sans-ExBold.woff2 (or .ttf) into assets/fonts/ and uncomment below. */
/*
@font-face {
  font-family: 'JUST Sans';
  src: url('../assets/fonts/JUSTSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JUST Sans';
  src: url('../assets/fonts/JUSTSans-ExBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* ---- Color: Purple scale ------------------------------------------- */
  --purple-950: #24101F; /* Aubergine Ink */
  --purple-900: #351231; /* Eggplant */
  --purple-800: #4A2A45; /* Smoked Plum */
  --purple-650: #6F596C; /* Dusty Plum */
  --purple-500: #938491; /* Mauve Gray */
  --purple-300: #C2B8C1; /* Lavender Stone */
  --purple-150: #E1DBE0; /* Lilac Mist */
  --purple-050: #F6F2F5; /* Warm Lilac White */
  --white: #FFFFFF;

  /* ---- Color: Accents --------------------------------------------------*/
  --teal-500: #3EACC3;
  --chartreuse-500: #C7FF24;
  --error-500: #CC3333;

  /* ---- Color: Semantic roles ------------------------------------------ */
  --bg-page: var(--purple-050);
  --bg-card: var(--white);
  --bg-dark: var(--purple-900);
  --bg-subtle: var(--purple-150);

  --text-primary: var(--purple-900);
  --text-secondary: var(--purple-650);
  --text-tertiary: var(--purple-500);
  --text-inverse: var(--white);
  --text-inverse-secondary: var(--purple-300);

  --accent-link: var(--teal-500);
  --accent-active: var(--teal-500);
  --highlight: var(--chartreuse-500);

  --border-light: var(--purple-150);
  --border-dark: var(--purple-800);
  --accent-bar: var(--teal-500);

  /* ---- Typography: families -------------------------------------------*/
  --font-display: 'Alte Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'JUST Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Modum', 'Georgia', serif;

  /* ---- Typography: scale ------------------------------------------------
     Values below px-in-final-environment as documented on Foundations. */
  --fs-mega: 200px;
  --fs-display-xl-alt: 144px;
  --fs-hero: 160px;
  --fs-display-xl: 112px;
  --fs-display-l: 80px;
  --fs-h1: 72px;
  --fs-h2: 56px;
  --fs-h3: 40px;
  --fs-h4: 28px;
  --fs-body-lead: 24px;
  --fs-body-large: 20px;
  --fs-body-default: 18px;
  --fs-body-small: 16px;
  --fs-nav: 15px;
  --fs-button: 15px;
  --fs-label: 14px;
  --fs-eyebrow: 14px;
  --fs-caption: 13px;
  --fs-footnote: 12px;

  /* ---- Spacing scale ---------------------------------------------------*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  /* ---- Layout ------------------------------------------------------- */
  --content-width: 1320px;
  --page-margin: 96px;
  --column-gap: 24px;
  --grid-columns: 12;

  /* ---- Radius ------------------------------------------------------- */
  --radius-sharp: 0px;
  --radius-subtle: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* ---- Borders ------------------------------------------------------- */
  --border-divider: 1px solid var(--border-light);
  --border-divider-dark: 1px solid var(--border-dark);
  --border-accent-bar: 3px solid var(--accent-bar);
}