/* ============================================================
   JBDS — design tokens
   Source: Figma design system
   ============================================================ */

:root {

  /* ========================
   SEMANTIC / TYPOGRAPHY
   * 
   * v 2.0 - updated on 4/17/26
   * 
   ======================== */

  /* Display */
  --display-font-weight: var(--fw-500);
  --display-font-size: var(--size-64);
  --display-line-height: var(--lh-72);
  --display-letter-spacing: var(--ls-none);

  --display-sm-font-size: var(--size-48);
  --display-sm-line-height: var(--lh-56);

  --display-lg-font-size: var(--size-80);
  --display-lg-line-height: var(--lh-88);

  --display-xl-font-size: var(--size-96);
  --display-xl-line-height: var(--lh-104);

  /* Heading 1 */
  --heading-1-font-weight: var(--fw-500);
  --heading-1-font-size: var(--size-48);
  --heading-1-line-height: var(--lh-56);
  --heading-1-letter-spacing: var(--ls-tight);

  --heading-1-sm-font-size: var(--size-36);
  --heading-1-sm-line-height: var(--lh-44);

  --heading-1-lg-font-size: var(--size-60);
  --heading-1-lg-line-height: var(--lh-68);

  --heading-1-xl-font-size: var(--size-72);
  --heading-1-xl-line-height: var(--lh-80);

  /* Heading 2 */
  --heading-2-font-weight: var(--fw-500);
  --heading-2-font-size: var(--size-36);
  --heading-2-line-height: var(--lh-44);
  --heading-2-letter-spacing: var(--ls-tight);

  --heading-2-sm-font-size: var(--size-28);
  --heading-2-sm-line-height: var(--lh-36);

  --heading-2-lg-font-size: var(--size-44);
  --heading-2-lg-line-height: var(--lh-52);

  --heading-2-xl-font-size: var(--size-54);
  --heading-2-xl-line-height: var(--lh-62);

  /* Heading 3 */
  --heading-3-font-weight: var(--fw-500);
  --heading-3-font-size: var(--size-28);
  --heading-3-line-height: var(--lh-36);
  --heading-3-letter-spacing: var(--ls-tight);

  --heading-3-sm-font-size: var(--size-21);
  --heading-3-sm-line-height: var(--lh-28);

  --heading-3-lg-font-size: var(--size-34);
  --heading-3-lg-line-height: var(--lh-42);

  --heading-3-xl-font-size: var(--size-42);
  --heading-3-xl-line-height: var(--lh-50);

  /* Heading 4 */
  --heading-4-font-weight: var(--fw-500);
  --heading-4-font-size: var(--size-24);
  --heading-4-line-height: var(--lh-32);
  --heading-4-letter-spacing: var(--ls-tight);

  --heading-4-sm-font-size: var(--size-18);
  --heading-4-sm-line-height: var(--lh-26);

  --heading-4-lg-font-size: var(--size-28);
  --heading-4-lg-line-height: var(--lh-36);

  --heading-4-xl-font-size: var(--size-34);
  --heading-4-xl-line-height: var(--lh-42);

  /* Heading 5 */
  --heading-5-font-weight: var(--fw-500);
  --heading-5-font-size: var(--size-20);
  --heading-5-line-height: var(--lh-28);
  --heading-5-letter-spacing: var(--ls-none);

  --heading-5-sm-font-size: var(--size-16);
  --heading-5-sm-line-height: var(--lh-24);

  --heading-5-lg-font-size: var(--size-22);
  --heading-5-lg-line-height: var(--lh-30);

  --heading-5-xl-font-size: var(--size-26);
  --heading-5-xl-line-height: var(--lh-34);

  /* Heading 6 */
  --heading-6-font-weight: var(--fw-500);
  --heading-6-font-size: var(--size-18);
  --heading-6-line-height: var(--lh-26);
  --heading-6-letter-spacing: var(--ls-none);

  --heading-6-sm-font-size: var(--size-14);
  --heading-6-sm-line-height: var(--lh-20);

  --heading-6-lg-font-size: var(--size-20);
  --heading-6-lg-line-height: var(--lh-28);

  --heading-6-xl-font-size: var(--size-22);
  --heading-6-xl-line-height: var(--lh-30);

  /* Subheading */
  --subheading-font-weight: var(--fw-400);
  --subheading-font-size: var(--size-20);
  --subheading-line-height: var(--lh-28);
  --subheading-letter-spacing: var(--ls-none);

  --subheading-sm-font-size: var(--size-16);
  --subheading-sm-line-height: var(--lh-24);

  --subheading-lg-font-size: var(--size-24);
  --subheading-lg-line-height: var(--lh-32);

  --subheading-xl-font-size: var(--size-28);
  --subheading-xl-line-height: var(--lh-36);

  /* Body */
  --body-font-weight: var(--fw-400);
  --body-font-weight-link: var(--fw-500);
  --body-font-weight-strong: var(--fw-600);
  --body-font-size: var(--size-16);
  --body-line-height: var(--lh-28);
  --body-letter-spacing: var(--ls-normal);

  --body-sm-font-size: var(--size-14);
  --body-sm-line-height: var(--lh-24);

  --body-lg-font-size: var(--size-18);
  --body-lg-line-height: var(--lh-30);

  --body-xl-font-size: var(--size-20);
  --body-xl-line-height: var(--lh-32);

  --body-2xl-font-size: var(--size-26);
  --body-2xl-line-height: var(--lh-38);
  --body-2xl-letter-spacing: var(--ls-none);

  --body-3xl-font-size: var(--size-32);
  --body-3xl-line-height: var(--lh-44);
  --body-3xl-letter-spacing: var(--ls-none);

  /* Label */
  --label-font-weight: var(--fw-500);
  --label-font-size: var(--size-16);
  --label-line-height: var(--lh-24);
  --label-letter-spacing: var(--ls-normal);

  --label-sm-font-size: var(--size-14);
  --label-sm-line-height: var(--lh-20);

  --label-lg-font-size: var(--size-18);
  --label-lg-line-height: var(--lh-26);

  --label-xl-font-size: var(--size-20);
  --label-xl-line-height: var(--lh-28);

  /* Eyebrow */
  --eyebrow-font-weight: var(--fw-500);
  --eyebrow-font-size: var(--size-14);
  --eyebrow-line-height: var(--lh-18);
  --eyebrow-letter-spacing: var(--ls-wide);

  --eyebrow-sm-font-size: var(--size-12);
  --eyebrow-sm-line-height: var(--lh-16);

  --eyebrow-lg-font-size: var(--size-16);
  --eyebrow-lg-line-height: var(--lh-20);

  --eyebrow-xl-font-size: var(--size-18);
  --eyebrow-xl-line-height: var(--lh-22);

  /* Fancy */
  --fancy-font-family: var(--font-serif);
  --fancy-letter-spacing: var(--ls-tight);
  --fancy-font-style: italic;
  --fancy-font-weight: var(--fw-400);

  /* ── SEMANTIC / COLOR ──────────────────────────────────────────────
     Slash notation from Figma (e.g. var(--canvas/light)) is normalized
     to double-dash notation (e.g. var(--canvas--light)).
  ─────────────────────────────────────────────────────────────────── */

  /* ------------- Color - CANVAS ------------- */
  /* used for page & section backgrounds only (not components). */
  --canvas--lightest: var(--neutral--white);
  --canvas--light: var(--neutral--50);
  --canvas--dark: var(--neutral--900);
  --canvas--darkest: var(--neutral--black);
  --canvas--info: var(--blue--600);
  --canvas--success: var(--green--600);
  --canvas--caution: var(--yellow--700);
  --canvas--warning: var(--orange--600);
  --canvas--danger: var(--pink--600);
  /* lighter canvas colors for more subtlety */
  --canvas--subtle--info: var(--blue--400);
  --canvas--subtle--success: var(--green--400);
  --canvas--subtle--caution: var(--yellow--400);
  --canvas--subtle--warning: var(--orange--400);
  --canvas--subtle--danger: var(--pink--400);

  /* ------------- Color - SURFACE ------------- */
  /* for component backgrounds */
  --surface--light: var(--neutral--white);
  --surface--light-overlay: var(--neutral--alpha--light--70);
  --surface--light-overlay_onDark: var(--neutral--alpha--light--10);
  --surface--dark: var(--neutral--black);
  --surface--dark-overlay: var(--neutral--alpha--dark--70);
  --surface--disabled: var(--neutral--400);

  /* color-based surfaces have optional hover/pressed interaction variables paired with them. All values have been contrast tested for WCAG compliance. Named for potential use case, but the use case does not need to be strictly followed when used purely for stylistic purposes. */
  --surface--info: var(--blue--600);
  --surface--info-hover: var(--blue--700);
  --surface--info-pressed: var(--blue--800);

  --surface--success: var(--green--600);
  --surface--success-hover: var(--green--700);
  --surface--success-pressed: var(--green--800);

  --surface--caution: var(--yellow--600);
  --surface--caution-hover: var(--yellow--700);
  --surface--caution-pressed: var(--yellow--800);

  --surface--warning: var(--orange--600);
  --surface--warning-hover: var(--orange--700);
  --surface--warning-pressed: var(--orange--800);

  --surface--danger: var(--pink--600);
  --surface--danger-hover: var(--pink--700);
  --surface--danger-pressed: var(--pink--800);

  /* lighter surface colors for more subtlety */
  --surface--subtle--info: var(--blue--400);
  --surface--subtle--info-hover: var(--blue--500);
  --surface--subtle--info-pressed: var(--blue--600);

  --surface--subtle--success: var(--green--400);
  --surface--subtle--success-hover: var(--green--500);
  --surface--subtle--success-pressed: var(--green--600);

  --surface--subtle--caution: var(--yellow--400);
  --surface--subtle--caution-hover: var(--yellow--500);
  --surface--subtle--caution-pressed: var(--yellow--600);

  --surface--subtle--warning: var(--orange--400);
  --surface--subtle--warning-hover: var(--orange--500);
  --surface--subtle--warning-pressed: var(--orange--600);

  --surface--subtle--danger: var(--pink--400);
  --surface--subtle--danger-hover: var(--pink--500);
  --surface--subtle--danger-pressed: var(--pink--600);

  /* ------------- Color - TEXT ------------- */
  /* all text colors listed here. Component-specific outliers will be listed here as well. */
  --text--disabled: var(--neutral--600);

  --text--body--dark: var(--neutral--900);
  --text--body--dark-subtle: var(--neutral--600);
  --text--body--light: var(--neutral--white);
  --text--body--light-subtle: var(--neutral--100);
  /* only heading & eyebrow text elements are permitted to use non-neutrals */
  --text--body--info: var(--blue--800);
  --text--body--success: var(--green--800);
  --text--body--caution: var(--yellow--800);
  --text--body--warning: var(--orange--800);
  --text--body--danger: var(--pink--800);

  --text--body--info_onDark: var(--blue--600);
  --text--body--success_onDark: var(--green--600);
  --text--body--caution_onDark: var(--yellow--600);
  --text--body--warning_onDark: var(--orange--600);
  --text--body--danger_onDark: var(--pink--600);

  /* standard <a> elements in the body content only. Component-specific interactive text (like buttons, pills, etc) have their own color variables */
  --text--link--default: var(--pink--800);
  --text--link--hover: var(--pink--900);
  --text--link--pressed: var(--pink--800);

  --text--link--default_onDark: var(--pink--600);
  --text--link--hover_onDark: var(--pink--400);
  --text--link--pressed_onDark: var(--pink--500);

  /* global nav links - different from links within the body content */
  --text--nav--default: var(--neutral--black);
  --text--nav--hover: var(--pink--800);
  --text--nav--pressed: var(--pink--900);

  /* button text - varies by button variant (primary, ghost, or nude). All disabled buttons get --text--disabled. */
  --text--button--primary--default: var(--neutral--black);
  --text--button--primary--hover: var(--neutral--white);
  --text--button--primary--focused: var(--neutral--white);
  --text--button--primary--pressed: var(--neutral--alpha--light--50);

  --text--button--ghost--default: var(--neutral--black);
  --text--button--ghost--hover: var(--blue--800);
  --text--button--ghost--focused: var(--blue--800);
  --text--button--ghost--pressed: var(--blue--900);

  --text--button--nude--default: var(--neutral--black);
  --text--button--nude--hover: var(--blue--800);
  --text--button--nude--focused: var(--blue--800);
  --text--button--nude--pressed: var(--blue--900);

  /* ------------- Color - BORDER ------------- */
  /* All values have been contrast tested for WCAG compliance. Named for potential use case, but the use case does not need to be strictly followed when used purely for stylistic purposes.

/* Subtle - neutral & color borders that are light and less prominent */
  --border--subtle--neutral: var(--neutral--100);
  --border--subtle--info: var(--blue--400);
  --border--subtle--success: var(--green--400);
  --border--subtle--caution: var(--yellow--400);
  --border--subtle--warning: var(--orange--400);
  --border--subtle--danger: var(--pink--400);

  /* Default - neutral & color borders that are typical standard for most inactive states */
  --border--default--neutral: var(--neutral--200);
  --border--default--info: var(--blue--700);
  --border--default--success: var(--green--700);
  --border--default--caution: var(--yellow--700);
  --border--default--warning: var(--orange--700);
  --border--default--danger: var(--pink--700);

  /* Strong - neutral & color borders that stand out, mostly for drawing attention or hover states */
  --border--strong--neutral: var(--neutral--500);
  --border--strong--info: var(--blue--800);
  --border--strong--success: var(--green--800);
  --border--strong--caution: var(--yellow--800);
  --border--strong--warning: var(--orange--800);
  --border--strong--danger: var(--pink--800);

  /* Subtle - neutral & color borders that are darkest, used for FOCUSED states */
  --border--x-strong--neutral: var(--neutral--900);
  --border--x-strong--info: var(--blue--900);
  --border--x-strong--success: var(--green--900);
  --border--x-strong--caution: var(--yellow--900);
  --border--x-strong--warning: var(--orange--900);
  --border--x-strong--danger: var(--pink--900);

  /* ------------- Color - ICON ------------- */
  /* All values have been contrast tested for WCAG compliance. Named for potential use case, but the use case does not need to be strictly followed when used purely for stylistic purposes. */
  --icon--subtle: var(--neutral--400);
  --icon--default: var(--neutral--600);
  --icon--strong: var(--neutral--700);
  --icon--x-strong: var(--neutral--900);
  --icon--x-strong_onDark: var(--neutral--white);
  --icon--info: var(--blue--900);
  --icon--success: var(--green--900);
  --icon--caution: var(--yellow--900);
  --icon--warning: var(--orange--900);
  --icon--danger: var(--pink--900);


  /* ── SEMANTIC / SHADE (composed box-shadow values) ─────────────
     Individual x/y/blur/spread components are available via CSS directly.
     Use these composed values in most cases.
  ─────────────────────────────────────────────────────────────────── */
  --shadow-inset-1: inset 0 2px 4px 0 var(--elevation-inset-strong);
  --shadow-raised-1: 0 1px 2px 0 var(--elevation-raised-subtle);
  --shadow-raised-2: 0 2px 8px 0 var(--elevation-raised-medium);
  --shadow-raised-3: 0 4px 16px 0 var(--elevation-raised-medium);
  --shadow-raised-4: 0 8px 32px 0 var(--elevation-raised-strong);
  --shadow-raised-5: 0 20px 64px 0 var(--elevation-raised-strong);

  /* ── SEMANTIC / BORDER WIDTHS ──────────────────────────────────────
  ─────────────────────────────────────────────────────────────────── */
  --border-none: var(--d-0);
  --border-hairline: var(--d-10);
  --border-thin: var(--d-25);
  --border-medium: var(--d-50);
  --border-thick: var(--d-100);

  /* ── SEMANTIC / RADIUS ─────────────────────────────────────────────
  ─────────────────────────────────────────────────────────────────── */
  --radius-none: var(--d-0);
  --radius-subtle: var(--d-50);
  --radius-standard: var(--d-100);
  --radius-emphasis: var(--d-200);
  --radius-pill: 9999px;

  /* ── SEMANTIC / LAYOUT ─────────────────────────────────────────────
  ─────────────────────────────────────────────────────────────────── */

  --container-max-default: 70%;
  --container-max-narrow: 60%;
  --container-max-wide: 90%;
  --container-max-flush: 100%;

  --section-vh-full: 100vh;
  --section-vh-lg: 75vh;
  --section-vh-half: 50vh;

  /* ── SEMANTIC / SPACING ─────────────────────────────────────────────
  One unified scale for all spacing — padding, gaps, and margins.
  Pick the size that fits the context; the name tells you the scale.
  ─────────────────────────────────────────────────────────────────── */

  --space-none: var(--d-0);
  /*   0px */
  --space-3xs: var(--d-10);
  /*   1px */
  --space-2xs: var(--d-25);
  /*   2px */
  --space-xs: var(--d-50);
  /*   4px */
  --space-sm: var(--d-100);
  /*   8px */
  --space-md: var(--d-150);
  /*  12px */
  --space-lg: var(--d-200);
  /*  16px */
  --space-xl: var(--d-300);
  /*  24px */
  --space-2xl: var(--d-400);
  /*  32px */
  --space-3xl: var(--d-600);
  /*  48px */
  --space-4xl: var(--d-800);
  /*  64px */
  --space-5xl: var(--d-1000);
  /*  80px */
  --space-6xl: var(--d-1200);
  /*  96px */
  --space-7xl: var(--d-1600);
  /* 128px */
  --space-8xl: var(--d-2100);
  /* 168px */
  --space-9xl: var(--d-2600);
  /* 208px */

}

/* ── RESPONSIVE / SEMANTIC LAYOUT MODES ──────────────────────────
  ─────────────────────────────────────────────────────────────────── */

@media (max-width: 411px) {
  :root {
    /* Layout */
    --container-max-default: 100%;
    --container-max-narrow: 100%;
    --container-max-wide: 100%;
  }
}

/* Tablet — between 412px and 820px */
@media (max-width: 820px) {
  :root {
    /* Layout */
    --container-max-default: 595px;
    --container-max-narrow: 400px;
    --container-max-wide: 90%;
  }
}

/* Medium — 821px to 1279px (tablet-landscape / small desktop)
   Container scales with the viewport (90%) so it never feels cramped.
   At 1279px this resolves to ~1151px — a 1px jump to 1152px at 1280px. */
@media (max-width: 1280px) {
  :root {
    --container-max-default: 90%;
    --container-max-narrow: 70%;
    --container-max-wide: 100%;
  }
}

/* ── DARK MODE COLOR SWAPS /  ──────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}