/* ============================================================
   SIMPLESTUFF — Design Tokens
   Colors, typography, spacing, motion, and semantic styles.
   Import this into any surface to inherit the brand system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Archivo:wght@100..900&display=swap');

:root {
  /* -------- Core palette -------- */
  --ss-ink:          #0E0E0C;   /* Near-black. Primary text, dark surfaces, primary buttons. */
  --ss-paper:        #fffffe;   /* Near-white. Default page background. Never pure #fff. */
  --ss-cream:        #F7F6F3;   /* Warm off-white. Card/step backgrounds. */
  --ss-stone:        #EAE8E1;   /* Image placeholder / empty state background. */
  --ss-lime:         #D6FF3B;   /* The signature accent. Use sparingly. */
  --ss-lime-hover:   #E8FF5F;   /* Button hover state for lime surfaces. */
  --ss-ink-hover:    #2A2A26;   /* Button hover state for ink surfaces. */

  /* -------- Semantic foreground -------- */
  --ss-fg:           var(--ss-ink);
  --ss-fg-dim:       rgba(14,14,12,0.62);   /* Body copy on light bg. */
  --ss-fg-mute:      rgba(14,14,12,0.4);    /* Eyebrows, meta, captions. */
  --ss-fg-quiet:     rgba(14,14,12,0.18);   /* Weakest readable text. */
  --ss-line:         rgba(14,14,12,0.12);   /* Standard hairline border. */

  /* Foreground on dark surfaces */
  --ss-fg-on-dark:         #ffffff;
  --ss-fg-dim-on-dark:     rgba(255,255,255,0.7);
  --ss-fg-mute-on-dark:    rgba(255,255,255,0.5);
  --ss-line-on-dark:       rgba(255,255,255,0.15);

  /* -------- Backgrounds -------- */
  --ss-bg:           var(--ss-paper);
  --ss-bg-2:         var(--ss-cream);
  --ss-bg-dark:      var(--ss-ink);

  /* -------- Type stacks -------- */
  --ss-font-sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --ss-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* -------- Type weights (variable font axis) -------- */
  --ss-wt-light:     300;
  --ss-wt-regular:   400;
  --ss-wt-medium:    500;
  --ss-wt-semibold:  600;

  /* -------- Tracking (letter-spacing) -------- */
  --ss-track-display:    -0.035em;  /* h1, h2 */
  --ss-track-heading:    -0.025em;  /* h3 */
  --ss-track-body-tight: -0.015em;  /* large body, quotes */
  --ss-track-mono-wide:   0.16em;   /* eyebrows */

  /* -------- Radii -------- */
  --ss-radius-hairline:  2px;   /* Cards, image plates. Almost-square. */
  --ss-radius-sm:        4px;   /* Feature blocks (cta-block). */
  --ss-radius-pill:      999px; /* Buttons and chips. */

  /* -------- Spacing scale (section padding family) -------- */
  --ss-pad-xs:   16px;
  --ss-pad-sm:   24px;
  --ss-pad-md:   32px;
  --ss-pad-lg:   48px;
  --ss-pad-xl:   64px;
  --ss-pad-2xl:  96px;
  --ss-pad-3xl:  112px;  /* Standard section vertical padding. */

  /* -------- Max widths -------- */
  --ss-container:  1680px;

  /* -------- Motion -------- */
  --ss-ease-out:         cubic-bezier(.2, .7, .2, 1);   /* Default — most transitions. */
  --ss-ease-bounce:      cubic-bezier(.34, 1.56, .64, 1); /* Overshoot — hover pops. */
  --ss-ease-sweep:       cubic-bezier(.76, 0, .24, 1);    /* Large curtains — menu overlay. */
  --ss-ease-snap:        cubic-bezier(.7, 0, .2, 1);      /* Crisp enter/exit — intro loader. */
  --ss-dur-fast:         200ms;
  --ss-dur-med:          450ms;
  --ss-dur-slow:         900ms;
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--ss-font-sans);
  background: var(--ss-bg);
  color: var(--ss-fg);
  font-variation-settings: "wght" 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type — apply via class OR by extending utilities
   Sizes are fluid; clamp() keeps them readable across breakpoints.
   ============================================================ */

.ss-h1 {
  font-family: var(--ss-font-sans);
  font-variation-settings: "wght" 600;
  font-size: clamp(48px, 8.4vw, 132px);
  line-height: 0.96;
  letter-spacing: var(--ss-track-display);
}
.ss-h1 em {
  font-style: normal;
  font-variation-settings: "wght" 300;  /* Light-italic accent convention */
  letter-spacing: -0.04em;
}

.ss-h2 {
  font-family: var(--ss-font-sans);
  font-variation-settings: "wght" 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: var(--ss-track-display);
}
.ss-h2 em { font-style: normal; font-variation-settings: "wght" 300; }

.ss-h3 {
  font-family: var(--ss-font-sans);
  font-variation-settings: "wght" 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: var(--ss-track-heading);
}

.ss-display-xl {
  /* Marquee / statement type — menu overlay, big-stat card */
  font-family: var(--ss-font-sans);
  font-variation-settings: "wght" 500;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.ss-quote {
  font-family: var(--ss-font-sans);
  font-variation-settings: "wght" 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ss-quote em { font-style: normal; font-variation-settings: "wght" 300; }
.ss-quote .hi {
  background: var(--ss-lime);
  padding: 0 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ss-body {
  font-family: var(--ss-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ss-fg-dim);
}
.ss-body-lg {
  font-family: var(--ss-font-sans);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ss-fg-dim);
}
.ss-body-sm {
  font-family: var(--ss-font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ss-fg-dim);
}

/* Eyebrow — the mono "— label" that opens most sections */
.ss-eyebrow {
  font-family: var(--ss-font-mono);
  font-size: 11px;
  letter-spacing: var(--ss-track-mono-wide);
  text-transform: uppercase;
  color: var(--ss-fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ss-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* Meta — mono caption, no rule */
.ss-meta {
  font-family: var(--ss-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-fg-mute);
}

/* Chip — pill border, mono text. For tag lists on step cards. */
.ss-chip {
  font-family: var(--ss-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-pill);
  color: var(--ss-fg-dim);
}

/* ============================================================
   Signature surfaces
   ============================================================ */

/* Lime highlight behind inline text (inside quotes). */
.ss-hi {
  background: var(--ss-lime);
  padding: 0 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Logo dot — reusable brand mark. */
.ss-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ss-lime);
  border: 1px solid var(--ss-ink);
}
.ss-dot.lg { width: 14px; height: 14px; }