/*
 * Sophont design tokens v1.0
 * Shared defaults for websites, documents, and figures.
 */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --sophont-electric: #2233bb;
  --sophont-electric-hover: #182899;
  --sophont-electric-soft: #e4e6f8;
  --sophont-midnight: #08082a;
  --sophont-ink: #20222c;
  --sophont-copy: #343640;
  --sophont-muted: #626674;

  /* Surfaces */
  --sophont-paper: #f8f5fa;
  --sophont-surface-raised: #eaeaf3;
  --sophont-surface-hover: #dfdfec;
  --sophont-panel: #ffffff;
  --sophont-rule: rgba(8, 8, 42, 0.08);
  --sophont-rule-strong: rgba(8, 8, 42, 0.17);

  /* Semantic colors: use only when meaning is consistent. */
  --sophont-positive: #007f73;
  --sophont-positive-soft: #d9eeea;
  --sophont-warning: #a65f00;
  --sophont-warning-soft: #f7ead7;
  --sophont-critical: #b13a4b;
  --sophont-critical-soft: #f6e1e5;
  --sophont-info: #2f6fba;
  --sophont-info-soft: #e0ebf7;

  /* Text on semantic soft surfaces. Keep data/mark colors above unchanged. */
  --sophont-positive-text: #00685e;
  --sophont-warning-text: #864b00;
  --sophont-critical-text: #9a2e3e;
  --sophont-info-text: #245b99;

  /* Available categorical colors; keep assignments stable in related figures. */
  --plot-cat-1: #2233bb;
  --plot-cat-2: #007f73;
  --plot-cat-3: #c45135;
  --plot-cat-4: #9b4fa3;
  --plot-cat-5: #b87800;
  --plot-cat-6: #3f7d48;
  --plot-cat-7: #4c78a8;
  --plot-cat-8: #7a84aa;

  /* Typography */
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Web roles at the default 16px root. Never reduce these on mobile.
     Labels/captions: 14px floor. Prose/inputs: 16px floor. Body: 17px.
     Keep the root size user-controlled; use density/columns to save space. */
  --text-label: 0.875rem;
  --text-caption: 0.9375rem;
  --text-secondary: 1rem;
  --text-control: 1rem;
  --text-body: 1.0625rem;
  --text-lead: 1.125rem;
  --text-display: 4rem;
  --weight-display: 300;
  --tracking-display: -0.05em;

  /* Numeric aliases retained for consumers of v1. */
  --type-00: var(--text-label);
  --type-0: var(--text-secondary);
  --type-1: var(--text-body);
  --type-2: var(--text-lead);
  --type-3: 1.25rem;
  /* Rem sizes enlarge with browser zoom without a vw term cancelling it. */
  --type-4: 2rem;
  --type-5: 2.75rem;

  /* Spacing: 4px base, 8px primary rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape and motion */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 250ms;

  /* Layout */
  --content-max: 92rem;
  --header-height: 3.25rem;
  /* Optional article measure. Short introductions can fill their column. */
  --reading-max: 68ch;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}