/* ============================================================
   Skipstone Studio — Foundations
   Color: CC-29 derived (Bone / Mint / Hot Pink / Navy / Mulberry)
   Type: Filepile (display, hand-drawn) + basis33 (body, pixel)
   ============================================================ */

@font-face {
  font-family: "Filepile";
  src: url("fonts/Filepile.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "basis33";
  src: url("fonts/basis33.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Palette (locked v2 — softer; pink is a surface, plum carries depth) ----- */
  --ss-bone:      #F2F0E5;  /* Ground — background */
  --ss-mint:      #A2DCC7;  /* Hero — brand action */
  --ss-pink:      #EDC8C4;  /* Soft accent — warm surface, dusty rose */
  --ss-navy:      #45444F;  /* Text — primary structural (was indigo, now charcoal) */
  --ss-mulberry:  #352B42;  /* Plum — deep emphasis, marks, stamps. Darker than text. */

  /* Borrowed CC-29 neighbours, used sparingly */
  --ss-bone-warm: #E6E2D1;  /* lightly tinted ground (cards on cards) */
  --ss-ink:       #352B42;  /* alias of plum, for legacy refs */

  /* ----- Semantic ----- */
  --ss-bg:        var(--ss-bone);
  --ss-fg:        var(--ss-navy);          /* primary text — charcoal */
  --ss-muted:     color-mix(in oklab, var(--ss-navy) 60%, var(--ss-bone));  /* derived soft gray */
  --ss-deep:      var(--ss-mulberry);      /* for marks, borders, stamps — deeper than text */
  --ss-accent:    var(--ss-mint);          /* hero */
  --ss-soft:      var(--ss-pink);          /* soft warm accent surface (dusty rose) */
  --ss-cta:       var(--ss-mulberry);      /* dark plum button with bone fg */
  --ss-line:      color-mix(in oklab, var(--ss-mulberry) 30%, transparent);

  /* ----- Type stack -----
     All-pixel commitment (per brand brief §7). Fallbacks stay in the pixel /
     monospace register if Filepile or basis33 fails to load — never fall back to
     a clean sans or cursive, which would re-introduce the rejected lo-fi-handmade
     direction.
  */
  --ss-display:   "Filepile", "VT323", "Press Start 2P", ui-monospace, "Courier New", monospace;
  --ss-body:      "basis33", "VT323", ui-monospace, "Courier New", monospace;
  --ss-mono:      "basis33", "VT323", ui-monospace, "Courier New", monospace;

  /* ----- Scale (basis33 reads small; bump line-height) ----- */
  --ss-fs-xxs:    13px;
  --ss-fs-xs:     15px;
  --ss-fs-sm:     17px;
  --ss-fs-md:     19px;     /* body */
  --ss-fs-lg:     24px;
  --ss-fs-xl:     34px;
  --ss-fs-2xl:    52px;
  --ss-fs-3xl:    84px;     /* display */
  --ss-fs-4xl:    128px;    /* hero wordmark */

  --ss-lh-tight:  1.05;
  --ss-lh-snug:   1.25;
  --ss-lh-body:   1.55;

  /* ----- Spacing (8pt-ish, but basis33 likes integer multiples) ----- */
  --ss-s-1:  4px;
  --ss-s-2:  8px;
  --ss-s-3:  12px;
  --ss-s-4:  16px;
  --ss-s-5:  24px;
  --ss-s-6:  32px;
  --ss-s-7:  48px;
  --ss-s-8:  64px;
  --ss-s-9:  96px;

  /* ----- Radii — small, mostly square. lo-fi doesn't ask for big curves ----- */
  --ss-r-0:  0px;
  --ss-r-1:  2px;
  --ss-r-2:  4px;
  --ss-r-3:  8px;
  --ss-r-pebble: 50% 50% 48% 52% / 55% 45% 55% 45%;  /* skipping-stone shape */

  /* ----- Shadows — almost none; lo-fi prefers a 1-2px offset ink line ----- */
  --ss-shadow-stamp:  2px 2px 0 var(--ss-mulberry);
  --ss-shadow-stamp-pink:  2px 2px 0 var(--ss-mulberry);
  --ss-shadow-soft:   0 1px 0 color-mix(in oklab, var(--ss-mulberry) 18%, transparent);

  /* ----- Borders ----- */
  --ss-border:        1.5px solid var(--ss-mulberry);
  --ss-border-thick:  3px solid var(--ss-mulberry);
  --ss-border-muted:  1px solid var(--ss-line);
}

/* ----- Base / semantic ----- */

html, body {
  background: var(--ss-bg);
  color: var(--ss-fg);
  font-family: var(--ss-body);
  font-size: var(--ss-fs-md);
  line-height: var(--ss-lh-body);
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
}

h1, .ss-h1 {
  font-family: var(--ss-display);
  font-size: var(--ss-fs-3xl);
  line-height: var(--ss-lh-tight);
  font-weight: normal;
  margin: 0 0 var(--ss-s-5);
  letter-spacing: -0.01em;
}

h2, .ss-h2 {
  font-family: var(--ss-display);
  font-size: var(--ss-fs-2xl);
  line-height: var(--ss-lh-tight);
  font-weight: normal;
  margin: 0 0 var(--ss-s-4);
}

h3, .ss-h3 {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-lg);
  line-height: var(--ss-lh-snug);
  font-weight: normal;
  margin: 0 0 var(--ss-s-3);
  letter-spacing: 0.02em;
}

p, .ss-p {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-md);
  line-height: var(--ss-lh-body);
  margin: 0 0 var(--ss-s-4);
  max-width: 62ch;
}

small, .ss-caption {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-xs);
  color: var(--ss-muted);
  letter-spacing: 0.04em;
}

code, .ss-mono {
  font-family: var(--ss-mono);
  font-size: var(--ss-fs-sm);
}

a, .ss-link {
  color: var(--ss-fg);
  text-decoration: underline;
  text-decoration-color: var(--ss-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
a:hover, .ss-link:hover {
  text-decoration-color: var(--ss-cta);
}

/* ----- Utility ----- */
.ss-eyebrow {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

.ss-stamp {
  display: inline-block;
  padding: 6px 12px 4px;
  border: var(--ss-border);
  background: var(--ss-bone);
  box-shadow: var(--ss-shadow-stamp);
  font-family: var(--ss-body);
  font-size: var(--ss-fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-stamp--cta {
  background: var(--ss-cta);
  color: var(--ss-bone);
  border-color: var(--ss-cta);
}

.ss-stamp--pink {
  background: var(--ss-pink);
  color: var(--ss-mulberry);
  border-color: var(--ss-pink);
}
.ss-stamp--mint {
  background: var(--ss-mint);
  border-color: var(--ss-navy);
}

/* ----- Selection ----- */
::selection {
  background: var(--ss-mint);
  color: var(--ss-navy);
}

/* ----- Pixel-snap rule for basis33: it's a bitmap font, so don't anti-alias body text ----- */
.ss-pixel {
  font-family: var(--ss-body);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
}