@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.3.0/files/bricolage-grotesque-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.3.0/files/bricolage-grotesque-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/public-sans@5.3.0/files/public-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/public-sans@5.3.0/files/public-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --slg-foil: #E0A93B;
  --slg-plum: #7E5A9E;
  --slg-graded: #4FA88C;
  --slg-cta-ink: #241C22;

  --slg-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --slg-font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-100: 0.8rem;
  --fs-200: 0.9rem;
  --fs-300: 1rem;
  --fs-400: clamp(1.0625rem, 1.02rem + 0.22vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.16rem + 0.44vw, 1.5625rem);
  --fs-600: clamp(1.5rem, 1.32rem + 0.9vw, 1.953rem);
  --fs-700: clamp(1.8rem, 1.47rem + 1.65vw, 2.441rem);
  --fs-800: clamp(2.1rem, 1.55rem + 2.75vw, 3.052rem);
  --fs-900: clamp(2.5rem, 1.62rem + 4.4vw, 3.815rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --measure: 68ch;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --nav-h: 64px;
  --tap: 44px;
  --shell: 1200px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal: 400ms;

}

[data-bs-theme="dark"] {
  --slg-bg: #1D1720;
  --slg-surface: #291F2C;
  --slg-line: #3B2E3F;
  --slg-text: #F0E8EC;
  --slg-muted: #A2929C;

  --slg-graded-ink: #4FA88C;
  --slg-plum-ink: #B593CE;
  --slg-link: #B593CE;
  --slg-link-hover: #C9B0DD;
  --slg-focus: #B593CE;
  --slg-heading: #F0E8EC;

  --slg-glass: rgba(29, 23, 32, 0.82);
  --slg-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --slg-counter-light: rgba(224, 169, 59, 0.14);
  --slg-vignette: rgba(15, 11, 17, 0.55);

  --bs-body-bg: var(--slg-bg);
  --bs-body-color: var(--slg-text);
  --bs-emphasis-color: var(--slg-text);
  --bs-secondary-color: var(--slg-muted);
  --bs-border-color: var(--slg-line);
  --bs-secondary-bg: var(--slg-surface);
  --bs-tertiary-bg: var(--slg-surface);
  --bs-heading-color: var(--slg-heading);
  --bs-link-color: var(--slg-link);
  --bs-link-hover-color: var(--slg-link-hover);
  --bs-link-color-rgb: 181, 147, 206;
  --bs-code-color: var(--slg-plum-ink);
}

[data-bs-theme="light"] {
  --slg-bg: #EBE6DA;
  --slg-surface: #FBF9F5;
  --slg-line: #D2C9B9;
  --slg-text: #241C22;
  --slg-muted: #6B5F63;

  --slg-graded-ink: #276B58;
  --slg-plum-ink: #6A4A88;
  --slg-link: #6A4A88;
  --slg-link-hover: #54376F;
  --slg-focus: #6A4A88;
  --slg-heading: #241C22;

  --slg-glass: rgba(235, 230, 218, 0.86);
  --slg-shadow: 0 10px 30px rgba(60, 44, 30, 0.14);
  --slg-counter-light: rgba(224, 169, 59, 0.22);
  --slg-vignette: rgba(180, 168, 145, 0.35);

  --bs-body-bg: var(--slg-bg);
  --bs-body-color: var(--slg-text);
  --bs-emphasis-color: var(--slg-text);
  --bs-secondary-color: var(--slg-muted);
  --bs-border-color: var(--slg-line);
  --bs-secondary-bg: var(--slg-surface);
  --bs-tertiary-bg: var(--slg-surface);
  --bs-heading-color: var(--slg-heading);
  --bs-link-color: var(--slg-link);
  --bs-link-hover-color: var(--slg-link-hover);
  --bs-link-color-rgb: 106, 74, 136;
  --bs-code-color: var(--slg-plum-ink);
}

:root {
  --bs-body-font-family: var(--slg-font-body);
  --bs-body-font-size: var(--fs-300);
  --bs-body-line-height: var(--lh-body);
}