/* ===========================================================
   SLASH4 — DESIGN TOKENS
   v1.0 · Mei 2026
   =========================================================== */

:root {
  /* ---- COLORS ---- */
  --s4-ink:        #0E0E0C;     /* near-black, warm */
  --s4-paper:      #F4F1EA;     /* warm off-white  */
  --s4-bone:       #E7E2D4;     /* soft support    */
  --s4-lime:       oklch(88% 0.20 125);   /* signal — #C7F23C */
  --s4-lime-2:     oklch(74% 0.22 130);   /* deeper lime, type-on-paper */
  --s4-strike:     oklch(58% 0.22 28);    /* strike-through red */
  --s4-rule:       rgba(14,14,12,0.18);   /* hairline */

  /* ---- COLOR ALIASES (semantic) ---- */
  --s4-bg:           var(--s4-paper);
  --s4-bg-inverse:   var(--s4-ink);
  --s4-bg-quiet:     var(--s4-bone);
  --s4-fg:           var(--s4-ink);
  --s4-fg-inverse:   var(--s4-paper);
  --s4-accent:       var(--s4-lime);
  --s4-accent-deep:  var(--s4-lime-2);
  --s4-error:        var(--s4-strike);

  /* ---- TYPOGRAPHY ---- */
  --s4-font-display: 'Big Shoulders Display', 'Arial Black', sans-serif;
  --s4-font-body:    'Inter', system-ui, sans-serif;
  --s4-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --s4-fs-hero:      200px;
  --s4-fs-display:   120px;
  --s4-fs-headline:  72px;
  --s4-fs-subhead:   48px;
  --s4-fs-body:      24px;
  --s4-fs-small:     18px;
  --s4-fs-label:     16px;

  --s4-lh-tight:     0.85;
  --s4-lh-snug:      1.1;
  --s4-lh-body:      1.5;

  --s4-track-display: -0.02em;
  --s4-track-label:   0.1em;

  /* ---- SPACING (4px base) ---- */
  --s4-1:  4px;
  --s4-2:  8px;
  --s4-3:  12px;
  --s4-4:  16px;
  --s4-5:  24px;
  --s4-6:  32px;
  --s4-7:  48px;
  --s4-8:  64px;
  --s4-9:  96px;
  --s4-10: 128px;

  /* ---- RADIUS ---- */
  --s4-r-none: 0;
  --s4-r-pill: 999px;
  /* Slash4 uses sharp corners for almost everything. Pill is reserved for tags. */

  /* ---- BORDERS ---- */
  --s4-border:        1px solid var(--s4-rule);
  --s4-border-strong: 2px solid var(--s4-ink);

  /* ---- THE SLASH ---- */
  --s4-slash-angle:   67deg;     /* the holy angle */
  --s4-slash-stroke:  6px;       /* default icon stroke */

  /* ---- ELEVATION ---- */
  --s4-shadow-card: 0 30px 60px rgba(0,0,0,0.18);

  /* ---- MOTION ---- */
  --s4-ease:     cubic-bezier(.2,.7,.2,1);
  --s4-dur-fast: 120ms;
  --s4-dur-med:  240ms;
}

/* ---- BASE TYPE UTILITIES ---- */
.s4-display  { font-family: var(--s4-font-display); font-weight: 900; line-height: var(--s4-lh-tight); letter-spacing: var(--s4-track-display); text-transform: uppercase; }
.s4-body     { font-family: var(--s4-font-body); font-weight: 400; line-height: var(--s4-lh-body); }
.s4-mono     { font-family: var(--s4-font-mono); }
.s4-label    { font-family: var(--s4-font-mono); font-size: var(--s4-fs-label); letter-spacing: var(--s4-track-label); text-transform: uppercase; }

/* ---- THE STRIKE ---- */
.s4-strike {
  text-decoration: line-through;
  text-decoration-thickness: 0.12em;
  text-decoration-color: var(--s4-strike);
  opacity: 0.55;
}

/* ---- SLASH PATTERN BACKGROUND ---- */
.s4-slashfield {
  background-image: repeating-linear-gradient(
    var(--s4-slash-angle),
    transparent 0,
    transparent 32px,
    currentColor 32px,
    currentColor 38px
  );
}