/*
 * ColorSpread design tokens (v0.1).
 *
 * Prefix `--cs-` keeps these separate from the `--dg-*` tokens used by
 * DigiPrint and Digitools Next. Raw inks never change between modes; semantic
 * tokens do. Contrast ratios are documented in docs/brand/colorspread/visual-identity.md.
 * Logo and art generator mirrors the ink values: deploy/colorspread/tools/build-brand-assets.mjs.
 */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Inks: for shapes, art and large display type. Not for small text on light. */
  --cs-cyan: #16b3f0;
  --cs-magenta: #f0368f;
  --cs-yellow: #ffcb2e;
  /* Overlaps are designed, not calculated. */
  --cs-violet: #6a4ce0; /* cyan x magenta */
  --cs-orange: #ff6b3d; /* magenta x yellow */

  /* Text-safe variants of the inks on light backgrounds. */
  --cs-cyan-700: #0a6e9c;
  --cs-magenta-700: #b8115f;
  --cs-orange-700: #b8400f;
  /* Lighter variants for text on dark backgrounds. */
  --cs-cyan-300: #6fd3fa;
  --cs-magenta-300: #ff7db8;
  --cs-violet-300: #a99bff;

  /* Neutrals. */
  --cs-ink: #14112b;
  --cs-ink-700: #1e1a3d;
  --cs-ink-500: #35305e;
  --cs-paper: #ffffff;
  --cs-substrate: #faf8f4;
  --cs-mist: #f1eef8;

  /* Type. */
  --cs-font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cs-text-xs: 0.75rem;
  --cs-text-sm: 0.875rem;
  --cs-text-md: 1rem;
  --cs-text-lg: 1.25rem;
  --cs-text-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --cs-text-2xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --cs-text-display: clamp(2.5rem, 1.4rem + 5vw, 4.75rem);

  /* Shape and space. */
  --cs-radius-sm: 8px;
  --cs-radius: 14px;
  --cs-radius-lg: 24px;
  --cs-radius-pill: 999px;
  --cs-gutter: 16px;
  --cs-max: 1120px;
  --cs-shadow: 0 1px 2px rgb(20 17 43 / 6%), 0 8px 24px rgb(20 17 43 / 6%);

  /* Semantic, light. */
  --cs-bg: var(--cs-substrate);
  --cs-surface: var(--cs-paper);
  --cs-surface-alt: var(--cs-mist);
  --cs-text: var(--cs-ink);
  --cs-text-muted: #5b5878;
  --cs-border: #e3dfee;
  --cs-link: var(--cs-cyan-700);
  --cs-accent-text: var(--cs-magenta-700);
  --cs-focus: var(--cs-violet);
  --cs-btn-bg: var(--cs-ink);
  --cs-btn-text: var(--cs-paper);
}

@media (min-width: 720px) {
  :root {
    --cs-gutter: 28px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --cs-bg: var(--cs-ink);
    --cs-surface: var(--cs-ink-700);
    --cs-surface-alt: #262150;
    --cs-text: #f6f4ff;
    --cs-text-muted: #b4b0d6;
    --cs-border: var(--cs-ink-500);
    --cs-link: var(--cs-cyan-300);
    --cs-accent-text: var(--cs-magenta-300);
    --cs-focus: var(--cs-cyan-300);
    --cs-btn-bg: var(--cs-paper);
    --cs-btn-text: var(--cs-ink);
    --cs-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%);
  }
}