/* SAFFRR Design System — Combined tokens
 * Fonts · Colors · Typography · Spacing · Effects · Base
 * PP Editorial New (Pangram Pangram) requires a commercial licence before public launch.
 * Spline Sans Mono is open (SIL OFL).
 */

/* ── Webfonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: "PP Editorial New";
  src: url("../assets/fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("../assets/fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("../assets/fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("../assets/fonts/PPEditorialNew-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("../assets/fonts/PPEditorialNew-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../assets/fonts/SplineSansMono.ttf") format("truetype");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../assets/fonts/SplineSansMono-Italic.ttf") format("truetype");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

/* ── Colors ──────────────────────────────────────────────────── */
:root {
  --saffrr-cream:    #F6F7EB;
  --saffrr-charcoal: #393E41;
  --saffrr-accent:   #E94F37;

  --saffrr-bg:           var(--saffrr-cream);
  --saffrr-ink:          var(--saffrr-charcoal);
  --saffrr-ink-soft:     rgba(57, 62, 65, 0.60);
  --saffrr-faint:        rgba(57, 62, 65, 0.40);
  --saffrr-hair:         rgba(57, 62, 65, 0.14);
  --saffrr-hair-strong:  rgba(57, 62, 65, 0.26);

  --saffrr-d-bg:    var(--saffrr-charcoal);
  --saffrr-d-ink:   var(--saffrr-cream);
  --saffrr-d-soft:  rgba(246, 247, 235, 0.62);
  --saffrr-d-faint: rgba(246, 247, 235, 0.40);
  --saffrr-d-hair:  rgba(246, 247, 235, 0.16);

  --saffrr-on-accent: var(--saffrr-cream);
  --saffrr-surface:       var(--saffrr-cream);
  --saffrr-surface-dark:  var(--saffrr-charcoal);
  --saffrr-text:          var(--saffrr-ink);
  --saffrr-text-muted:    var(--saffrr-ink-soft);
  --saffrr-text-faint:    var(--saffrr-faint);
  --saffrr-border:        var(--saffrr-hair);
  --saffrr-border-strong: var(--saffrr-hair-strong);
  --saffrr-action:        var(--saffrr-accent);
  --saffrr-live:          var(--saffrr-accent);
}

/* ── Typography ──────────────────────────────────────────────── */
:root {
  --saffrr-font-display:   "PP Editorial New", Georgia, "Times New Roman", serif;
  --saffrr-font-mono:      "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --saffrr-font-editorial: var(--saffrr-font-display);
  --saffrr-font-ui:        var(--saffrr-font-mono);

  --saffrr-weight-ultralight: 200;
  --saffrr-weight-regular:    400;
  --saffrr-weight-ultrabold:  800;
  --saffrr-weight-mono:       400;
  --saffrr-weight-mono-med:   500;

  --saffrr-text-display: clamp(72px, 18vw, 230px);
  --saffrr-text-h1:      clamp(40px, 6vw, 80px);
  --saffrr-text-h2:      clamp(28px, 3.6vw, 46px);
  --saffrr-text-h3:      24px;
  --saffrr-text-body:    17px;
  --saffrr-text-small:   15px;
  --saffrr-text-label:   11px;
  --saffrr-text-caption: 10.5px;
  --saffrr-text-data:    12.5px;

  --saffrr-lh-display: 0.92;
  --saffrr-lh-tight:   1.08;
  --saffrr-lh-head:    1.1;
  --saffrr-lh-body:    1.55;
  --saffrr-lh-mono:    1.4;

  --saffrr-track-display: -0.006em;
  --saffrr-track-h1:      -0.01em;
  --saffrr-track-h2:      -0.015em;
  --saffrr-track-label:   0.26em;
  --saffrr-track-ui:      0.14em;
  --saffrr-track-meta:    0.04em;

  --saffrr-measure: 66ch;
}

/* ── Spacing ─────────────────────────────────────────────────── */
:root {
  --saffrr-space-0:  0;
  --saffrr-space-1:  4px;
  --saffrr-space-2:  8px;
  --saffrr-space-3:  12px;
  --saffrr-space-4:  16px;
  --saffrr-space-5:  20px;
  --saffrr-space-6:  24px;
  --saffrr-space-8:  32px;
  --saffrr-space-10: 40px;
  --saffrr-space-12: 48px;
  --saffrr-space-14: 56px;
  --saffrr-space-16: 64px;
  --saffrr-space-20: 80px;
  --saffrr-space-23: 92px;
  --saffrr-space-24: 96px;
  --saffrr-space-32: 128px;
  --saffrr-space-40: 160px;

  --saffrr-container: 1200px;
  --saffrr-reading:   680px;
  --saffrr-gutter:    56px;
  --saffrr-rail:      240px;
  --saffrr-section:   92px;

  --saffrr-pad-button:     14px 26px;
  --saffrr-pad-button-sm:  9px 18px;
  --saffrr-pad-field:      13px 16px;
  --saffrr-pad-card:       26px;
  --saffrr-pad-pill:       9px 16px;
  --saffrr-pad-panel-head: 18px 26px;
  --saffrr-pad-modal:      32px;

  --saffrr-bp-sm: 640px;
  --saffrr-bp-md: 880px;
  --saffrr-bp-lg: 1200px;
}

/* ── Effects ─────────────────────────────────────────────────── */
:root {
  --saffrr-radius-none: 0;
  --saffrr-radius-sm:   2px;
  --saffrr-radius-md:   4px;
  --saffrr-radius-pill: 100px;
  --saffrr-radius-tile: 0.18em;
  --saffrr-radius-full: 9999px;

  --saffrr-shadow-none: none;
  --saffrr-shadow-xs: 0 1px 2px rgba(57, 62, 65, 0.06);
  --saffrr-shadow-sm: 0 2px 8px rgba(57, 62, 65, 0.08);
  --saffrr-shadow-md: 0 8px 24px rgba(57, 62, 65, 0.12);

  --saffrr-border-hair:   1px solid var(--saffrr-hair);
  --saffrr-border-strong: 1px solid var(--saffrr-hair-strong);

  --saffrr-dur-xs: 80ms;
  --saffrr-dur-sm: 160ms;
  --saffrr-dur-md: 240ms;
  --saffrr-dur-lg: 480ms;

  --saffrr-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --saffrr-ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
}

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