/* BRIGHTSIDE tokens: the single source of truth. Re-skin starts here.
   Accent swap for a new client = change --lilac and --lilac-deep only. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --fresh: #f8f9fb;        /* fresh white ground */
  --fresh-2: #eef0f4;      /* washed panel */
  --fresh-3: #ffffff;      /* pure white for raised panels */
  --slate: #23272e;        /* slate ink */
  --slate-2: #2b303a;
  --slate-3: #363c48;
  --lilac-deep: #7b5fb5;   /* deep: for fresh grounds, AA at label sizes */
  --lilac: #a98be0;        /* bright: for slate grounds and large marks */
  --lilac-wash: #f1ecfa;   /* tint band */
  --red-deep: #b3383e;     /* correction red, deep: for fresh grounds */
  --red-bright: #f08a8f;   /* correction red, bright: for slate grounds */

  /* semantics (fresh theme is the default) */
  --bg: var(--fresh);
  --bg-2: var(--fresh-2);
  --bg-raise: var(--fresh-3);
  --fg: var(--slate);
  --muted: #575e69;
  --line: rgba(35, 39, 46, 0.16);
  --line-strong: rgba(35, 39, 46, 0.5);
  --accent: var(--lilac-deep);
  --accent-soft: var(--lilac-wash);
  --on-accent: var(--fresh-3);   /* label colour on a filled accent */
  --warn: var(--red-deep);       /* 5.61:1 on the fresh ground */
  --focus: #2b4fd8;
  --glow-strong: rgba(169, 139, 224, 0.32);  /* hero wash, upper */
  --glow-soft: rgba(169, 139, 224, 0.14);    /* hero wash, lower */

  /* type */
  --font-display: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --font-body: "Lexend", "Segoe UI", Arial, sans-serif;
  --t-hero: clamp(2.4rem, 6.2vw, 4.4rem);
  --t-block: clamp(1.8rem, 3.6vw, 2.7rem);
  --t-sub: clamp(1.2rem, 2vw, 1.5rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.2rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-tag: 0.75rem;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --track-tag: 0.16em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --section-pad: clamp(4rem, 9vh, 7rem);
  --edge: clamp(1.1rem, 4vw, 3rem);
  --measure: 36rem;
  --max-w: 72rem;

  /* shape + depth */
  --r-1: 6px;
  --r-2: 14px;
  --r-3: 24px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35, 39, 46, 0.05), 0 10px 30px rgba(123, 95, 181, 0.1);

  /* motion */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* layers */
  --z-bar: 40;
  --z-skip: 60;
}

/* slate theme: any wrapper with data-theme="slate" flips the semantic set */
[data-theme="slate"] {
  --bg: var(--slate);
  --bg-2: var(--slate-2);
  --bg-raise: var(--slate-3);
  --fg: var(--fresh);
  --muted: #a7adb8;
  --line: rgba(248, 249, 251, 0.18);
  --line-strong: rgba(248, 249, 251, 0.55);
  --accent: var(--lilac);
  --accent-soft: var(--glow-soft);
  --on-accent: var(--slate);     /* 5.32:1 against bright lilac */
  --warn: var(--red-bright);     /* 6.24:1 on the slate ground */
  --focus: #9db4ff;
}