/* SaltStocks Design System — Colors & Type
   §14.2 Color Palette · §14.3 Typography · §14.4 Spacing
   §14.5 Border Radius & Shadows · §14.6 Motion

   Primary names use --ss-* prefix (canonical).
   Legacy --rs-* aliases point here so resale.css needs no changes.
*/

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ─────────────────────────────────────────────────────────────────────────────
   Design tokens
───────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── §14.2 Surfaces ───────────────────────────────────── */
  --ss-bg:            #f4faf8;
  --ss-surface:       #ffffff;
  --ss-surface-alt:   #edf7f3;
  --ss-surface-deep:  #dff0e8;
  --ss-surface-input: #fcfffd;

  /* ── §14.2 Borders ────────────────────────────────────── */
  --ss-border:        #c7ddd3;
  --ss-border-strong: #8eb9a7;
  --ss-border-dashed: #c7ddd3;

  /* ── §14.2 Text ───────────────────────────────────────── */
  --ss-text:          #18322d;
  --ss-muted:         #5e7d73;

  /* ── §14.2 Accent / Green ─────────────────────────────── */
  --ss-accent:        #2f8f73;
  --ss-accent-strong: #236d57;
  --ss-accent-soft:   rgba(47, 143, 115, 0.12);
  --ss-accent-glow:   rgba(47, 143, 115, 0.18);

  /* ── §14.2 Semantic ───────────────────────────────────── */
  --ss-warn:          #8c6d1f;
  --ss-warn-bg:       rgba(140, 109, 31, 0.08);
  --ss-danger:        #8b3f49;
  --ss-danger-bg:     rgba(139, 63, 73, 0.10);
  --ss-info:          #356f61;

  /* ── §14.2 Status pills ───────────────────────────────── */
  --ss-status-listed-bg:   rgba(47, 143, 115, 0.15);
  --ss-status-listed-fg:   #236d57;
  --ss-status-unlisted-bg: rgba(94, 125, 115, 0.12);
  --ss-status-unlisted-fg: #5e7d73;
  --ss-status-sold-bg:     rgba(47, 143, 115, 0.08);
  --ss-status-sold-fg:     #356f61;
  --ss-status-donated-bg:  rgba(139, 63, 73, 0.10);
  --ss-status-donated-fg:  #8b3f49;

  /* ── §14.3 Font families ──────────────────────────────── */
  --ss-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ss-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ss-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── §14.3 Type scale ─────────────────────────────────── */
  --ss-fs-display: 2.5rem;
  --ss-fs-h1:      2rem;
  --ss-fs-h2:      1.5rem;
  --ss-fs-h3:      1.1rem;
  --ss-fs-body:    1rem;
  --ss-fs-help:    0.92rem;
  --ss-fs-label:   0.82rem;
  --ss-fs-pill:    0.82rem;
  --ss-fs-eyebrow: 0.78rem;

  /* ── §14.3 Line heights ───────────────────────────────── */
  --ss-lh-tight: 1.1;
  --ss-lh-snug:  1.3;
  --ss-lh-body:  1.5;

  /* ── §14.3 Tracking ───────────────────────────────────── */
  --ss-tracking-display: -0.03em;
  --ss-tracking-eyebrow: 0.08em;
  --ss-tracking-pill:    0em;

  /* ── §14.4 Spacing scale (4px-derived) ───────────────── */
  --ss-s-1:  4px;
  --ss-s-2:  6px;
  --ss-s-3:  8px;
  --ss-s-4:  10px;
  --ss-s-5:  12px;
  --ss-s-6:  14px;
  --ss-s-7:  16px;
  --ss-s-8:  18px;
  --ss-s-9:  22px;
  --ss-s-10: 24px;
  --ss-s-12: 32px;
  --ss-s-16: 48px;

  /* ── §14.5 Border radii ───────────────────────────────── */
  --ss-r-input: 12px;
  --ss-r-panel: 14px;
  --ss-r-card:  18px;   /* system signature */
  --ss-r-pill:  999px;

  /* ── §14.5 Shadows ────────────────────────────────────── */
  --ss-shadow-card:   0 12px 24px rgba(24, 50, 45, 0.08);
  --ss-shadow-kanban: 0 8px 16px rgba(24, 50, 45, 0.06);

  /* ── §14.6 Motion ─────────────────────────────────────── */
  --ss-dur-base: 220ms;
  --ss-ease:     ease;

  /* ── Legacy --rs-* aliases (backwards compat for resale.css) */
  --rs-bg:            var(--ss-bg);
  --rs-surface:       var(--ss-surface);
  --rs-surface-alt:   var(--ss-surface-alt);
  --rs-surface-deep:  var(--ss-surface-deep);
  --rs-border:        var(--ss-border);
  --rs-border-strong: var(--ss-border-strong);
  --rs-text:          var(--ss-text);
  --rs-muted:         var(--ss-muted);
  --rs-accent:        var(--ss-accent);
  --rs-accent-strong: var(--ss-accent-strong);
  --rs-warn:          var(--ss-warn);
  --rs-danger:        var(--ss-danger);
  --rs-shadow:        var(--ss-shadow-card);
  --rs-radius:        var(--ss-r-card);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Global base — applied to every page via base.html
───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ss-font-sans);
  font-size: var(--ss-fs-body);
  line-height: var(--ss-lh-body);
  color: var(--ss-text);
  background:
    radial-gradient(circle at top right, rgba(47, 143, 115, 0.08), transparent 24rem),
    linear-gradient(180deg, #f8fcfa 0%, #eef6f2 100%);
  background-attachment: fixed;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Inter font features — cv11 + ss01 for slightly more geometric forms */
body,
input,
select,
textarea,
button {
  font-feature-settings: "cv11", "ss01";
}

/* Monospace elements use JetBrains Mono */
code,
pre,
kbd,
samp {
  font-family: var(--ss-font-mono);
  font-size: 0.9em;
}

/* Heading scale — Fraunces for H1/H2, Inter for H3 and below */
h1 {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-h1);
  font-weight: 600;
  line-height: var(--ss-lh-tight);
  letter-spacing: var(--ss-tracking-display);
  color: var(--ss-text);
  margin: 0 0 var(--ss-s-5);
}

h2 {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-h2);
  font-weight: 600;
  line-height: var(--ss-lh-snug);
  letter-spacing: var(--ss-tracking-display);
  color: var(--ss-text);
  margin: 0 0 var(--ss-s-5);
}

h3 {
  font-family: var(--ss-font-sans);
  font-size: var(--ss-fs-h3);
  font-weight: 600;
  line-height: var(--ss-lh-snug);
  color: var(--ss-text);
  margin: 0 0 var(--ss-s-3);
}