@layer sop.tokens {
  :root {
    --sop-ink: #090b10;
    --sop-ink-soft: #0b0f16;
    --sop-surface: #11151d;
    --sop-surface-raised: #151a24;
    --sop-navy-deep: #0e1523;
    --sop-gold: #d0ab75;
    --sop-gold-hover: #e0bd8a;
    --sop-cream: #f4f0e8;
    --sop-cream-deep: #eee8dd;
    --sop-copy: #b9c0cc;
    --sop-copy-subtle: #778293;
    --sop-ink-copy: #4a566a;
    --sop-signal: #c9847f;
    --sop-success: #76b493;
    --sop-line: rgb(255 255 255 / 10%);
    --sop-line-soft: rgb(255 255 255 / 6%);
    --sop-cream-line: rgb(9 11 16 / 10%);

    --sop-font: "Glacial Indifference", Manrope, Poppins, Arial, sans-serif;
    --sop-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --sop-content: min(100% - 48px, 1240px);
    --sop-wide: min(100% - 48px, 1400px);
    --sop-reading: min(100% - 48px, 760px);
    --sop-space-1: 0.5rem;
    --sop-space-2: 0.75rem;
    --sop-space-3: 1rem;
    --sop-space-4: 1.5rem;
    --sop-space-5: 2rem;
    --sop-space-6: 3rem;
    --sop-space-7: 4rem;
    --sop-space-8: clamp(4.5rem, 8vw, 8.5rem);

    --sop-radius-sm: 0.625rem;
    --sop-radius: 1rem;
    --sop-radius-lg: 1.25rem;
    --sop-shadow-sm: 0 8px 24px rgb(0 0 0 / 14%);
    --sop-shadow-lg: 0 20px 54px rgb(0 0 0 / 22%);
    --sop-transition: 180ms ease;
    --sop-header-height: 5rem;
    --sop-z-header: 100;
  }

  @media (max-width: 767px) {
    :root {
      --sop-content: min(100% - 32px, 1240px);
      --sop-wide: min(100% - 32px, 1400px);
      --sop-reading: min(100% - 32px, 760px);
      --sop-header-height: 4.5rem;
    }
  }
}


@layer sop.tokens {
  :root {
    --sop-navy: #10182a;
    --sop-navy-rich: #111d33;
    --sop-teal: #35d7df;
    --sop-teal-soft: rgb(53 215 223 / 16%);
    --sop-line-strong: rgb(255 255 255 / 15%);
    --sop-grid-line: rgb(208 218 235 / 5%);
    --sop-grid-line-strong: rgb(208 218 235 / 8%);
    --sop-glow-gold: rgb(208 171 117 / 18%);
    --sop-glow-teal: rgb(53 215 223 / 16%);
    --sop-shadow-lift: 0 18px 44px rgb(0 0 0 / 26%);
  }
}