/* ── colors_and_type.css ── */
/* Dashlane Design System — Core CSS Variables
   Extracted from design-tokens (colors + typography) and default-theme.ts
   All tokens prefixed with --ds- to match the upstream naming convention.
*/

/* ---------- Fonts ---------- */
/* @font-face Public Sans 400 normal: declared by tokens.json (fonts/PublicSans-Regular.woff2) */
/* @font-face Public Sans 500 normal: declared by tokens.json (fonts/PublicSans-Medium.woff2) */
/* @font-face Public Sans 600 normal: declared by tokens.json (fonts/PublicSans-SemiBold.woff2) */
/* @font-face GT Walsheim Pro 500 normal: declared by tokens.json (fonts/GTWalsheimPro-Medium.woff2) */
/* @font-face Apercu Mono Pro 400 normal: declared by tokens.json (fonts/ApercuMonoPro-Regular.woff2) */

:root {
  /* --- Font families ---
     These are the WEB platform fonts. Text-style NAMES are shared across platforms,
     but each platform renders the "platform" role in its native typeface:
       Web → Public Sans   ·   Apple → SF Pro   ·   Android → Roboto
     Monospace role: Web → Apercu Mono Pro · Apple → SF Mono · Android → Roboto Mono
     Brand role (specialty/brand only) → GT Walsheim Pro on every platform. */
  --ds-font-body: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ds-font-heading: 'GT Walsheim Pro', 'Public Sans', sans-serif;
  --ds-font-mono: 'Apercu Mono Pro', ui-monospace, 'SF Mono', Menlo, monospace; /* @kind other */
}

/* Dark theme — opt in with [data-theme="dark"] */
[data-theme='dark'] {
}

/* ==================================================================
   TYPOGRAPHY — semantic classes matching DS tokens
   ================================================================== */

body {
  font-family: var(--ds-font-body);
  color: var(--ds-text-neutral-standard);
  background: var(--ds-background-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ds.specialty.brand — GT Walsheim Pro, display */
.ds-specialty-brand-large {
  font-family: var(--ds-font-heading);
  font-weight: 500;
  font-size: 110px;
  line-height: 110px;
  letter-spacing: -0.02em;
}
.ds-specialty-brand-medium {
  font-family: var(--ds-font-heading);
  font-weight: 500;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.02em;
}
.ds-specialty-brand-small {
  font-family: var(--ds-font-heading);
  font-weight: 500;
  font-size: 44px;
  line-height: 44px;
  letter-spacing: -0.02em;
}

/* ds.specialty.monospace */
.ds-specialty-mono-large {
  font-family: var(--ds-font-mono);
  font-weight: 400;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.03em;
}
.ds-specialty-mono-medium {
  font-family: var(--ds-font-mono);
  font-weight: 400;
  font-size: 37px;
  line-height: 42px;
  letter-spacing: -0.03em;
}
.ds-specialty-mono-small {
  font-family: var(--ds-font-mono);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.03em;
}

/* ds.specialty.spotlight */
.ds-specialty-spotlight-large { font-family: var(--ds-font-body); font-weight: 400; font-size: 64px; line-height: 64px; }
.ds-specialty-spotlight-medium { font-family: var(--ds-font-body); font-weight: 400; font-size: 37px; line-height: 42px; }
.ds-specialty-spotlight-small { font-family: var(--ds-font-body); font-weight: 400; font-size: 26px; line-height: 30px; }

/* ds.title */
.ds-title-section-large  { font-family: var(--ds-font-body); font-weight: 500; font-size: 31px; line-height: 36px; letter-spacing: -0.02em; }
.ds-title-section-medium { font-family: var(--ds-font-body); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.ds-title-block-medium   { font-family: var(--ds-font-body); font-weight: 500; font-size: 16px; line-height: 20px; }
.ds-title-block-small    { font-family: var(--ds-font-body); font-weight: 500; font-size: 14px; line-height: 18px; }
.ds-title-supporting-small {
  font-family: var(--ds-font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ds.body */
.ds-body-standard-regular { font-family: var(--ds-font-body); font-weight: 400; font-size: 15px; line-height: 20px; }
.ds-body-standard-strong  { font-family: var(--ds-font-body); font-weight: 600; font-size: 15px; line-height: 20px; }
.ds-body-standard-link    { font-family: var(--ds-font-body); font-weight: 400; font-size: 15px; line-height: 20px; text-decoration: underline; }
.ds-body-standard-mono    { font-family: var(--ds-font-mono); font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.02em; }
.ds-body-reduced-regular  { font-family: var(--ds-font-body); font-weight: 400; font-size: 13px; line-height: 18px; }
.ds-body-reduced-strong   { font-family: var(--ds-font-body); font-weight: 600; font-size: 13px; line-height: 18px; }
.ds-body-reduced-mono     { font-family: var(--ds-font-mono); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: -0.02em; }
.ds-body-helper-regular   { font-family: var(--ds-font-body); font-weight: 400; font-size: 11px; line-height: 12px; }

/* ds.component */
.ds-component-button-standard { font-family: var(--ds-font-body); font-weight: 500; font-size: 15px; line-height: 18px; }
.ds-component-button-small    { font-family: var(--ds-font-body); font-weight: 500; font-size: 13px; line-height: 14px; }
.ds-component-link-standard   { font-family: var(--ds-font-body); font-weight: 500; font-size: 15px; line-height: 18px; }
.ds-component-link-reduced    { font-family: var(--ds-font-body); font-weight: 500; font-size: 13px; line-height: 14px; }
.ds-component-badge-standard {
  font-family: var(--ds-font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}