/* ============================================================
   Salesloft Brand Guidelines — Shared Tokens
   Single source of truth for every spread.
   Aligned with the design-system token files (Tailwind v4).
   ============================================================ */

/* Gellix (licensed). Two variable fonts cover all weights 100–900. */
@font-face {
  font-family: 'Gellix';
  src: url('../fonts/GellixUprightsVF.woff2') format('woff2'),
       url('../fonts/GellixUprightsVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Gellix';
  src: url('../fonts/GellixItalicsVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}

:root {
  /* -------- color (values verified against Salesloft DS Foundations) -------- */
  --warm-50: #f5f0ec;    /* warm/50 · surface/bg on light */
  --warm-100: #eae3dd;   /* warm/100 · foreground/fg on dark */
  --warm-150: #eae3dd;   /* legacy alias — DS has no 150; resolves to warm/100 */
  --warm-200: #d8cfc9;   /* warm/200 */
  --warm-300: #c9bab0;   /* warm/300 */
  --warm-400: #b9aa9f;   /* warm/400 */
  --warm-500: #a8978c;   /* warm/500 · text/eyebrow + headline muted on dark */
  --black: #181818;      /* black · surface/bg on dark */
  --panel: #201f1e;      /* elevated card on ink — one quiet step above black (not a DS ramp stop) */
  --gray-850: #282726;   /* same value; DS name is warm/900 */
  --gray-800: #3a3936;
  --gray-700: #514f4b;
  --gray-500: #7a7773;
  --gray-350: #b7b4b1;   /* legacy alias — DS has no 350; resolves to gray/300 · text/body on dark */
  --gray-300: #b7b4b1;   /* gray/300 */
  --green: #5de27e;      /* green/500 */
  --green-600: #3ccb66;
  --green-700: #31ad53;
  --green-400: #84e99c;
  --brown: #897972;      /* warm/600 · foreground/fg-3 on dark */
  --white: #ffffff;
  --blue-500: #6f90f5;   /* focus ring only */

  /* -------- semantic · buttons (mirrors Figma DS variables) --------
     Components reference these, never the primitives above. */
  --button-primary-bg: var(--green);
  --button-primary-bg-hover: var(--green-600);
  --button-primary-bg-pressed: var(--green-700);
  --button-primary-fg: var(--black);
  --button-primary-bg-disabled: var(--warm-200);
  --button-primary-fg-disabled: var(--warm-500);
  --button-secondary-bg: var(--gray-850);
  --button-secondary-fg: var(--white);
  --button-secondary-bg-disabled: var(--warm-200);
  --button-secondary-fg-disabled: var(--warm-500);
  --button-focus-ring: var(--blue-500);
  --state-hover: rgba(24, 24, 24, .06);           /* ink 6% on light */
  --state-hover-inverse: rgba(255, 255, 255, .08); /* white 8% on dark */
  --state-pressed-inverse: rgba(255, 255, 255, .2);
  --size-button-height: 48px;
  --spacing-button-x: 16px;
  --spacing-gap-button: 8px;
  --radius-button: 8px;

  /* -------- type -------- */
  --sans: 'Gellix', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* -------- motion -------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* all arrivals, reveals & panels */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* hovers & presses only */
  --ease: var(--ease-out);                       /* legacy alias */

  --dur-micro: 350ms;        /* 250–450ms — hovers, swaps, ticks */
  --dur-structural: 600ms;   /* 500–700ms — panels, morphs, menus */
  --dur-reveal: 1.2s;        /* 0.9–1.6s — wipes & entrances */
}