/* sstanek.dev — design tokens (single source of truth for every sstanek.dev app).
 *
 * Framework-agnostic CSS custom properties. Vendor a COPY of this file into each
 * app and link it BEFORE components.css (see /sdk/sync.sh and /sdk/constraints.md).
 * Change values HERE only — never hardcode a colour / size / font in an app. */
:root {
  /* ── Neutral palette (zinc) ───────────────────────────────────────────── */
  --ss-bg:         #ffffff;  /* page background                                */
  --ss-surface:    #ffffff;  /* cards / raised surfaces                        */
  --ss-surface-2:  #fafafa;  /* subtle alternate surface                       */
  --ss-border:     #e4e4e7;  /* hairline borders (zinc-200)                    */
  --ss-border-strong:#d4d4d8;/* input borders (zinc-300)                       */
  --ss-ink:        #18181b;  /* headings / primary text (zinc-900)             */
  --ss-ink-soft:   #3f3f46;  /* body text (zinc-700)                           */
  --ss-muted:      #71717a;  /* secondary / meta (zinc-500)                    */
  --ss-faint:      #a1a1aa;  /* disabled / hints (zinc-400)                    */

  /* ── Accent (dark green) ──────────────────────────────────────────────── */
  --ss-accent:        #15803d; /* green-700 */
  --ss-accent-hover:  #166534; /* green-800 */
  --ss-accent-soft:   #f0fdf4; /* green-50  */
  --ss-accent-border: #bbf7d0; /* green-200 (chips) */
  --ss-accent-ring:   rgba(21, 128, 61, .25);
  --ss-on-accent:     #ffffff;

  /* ── Status (badges, results) ─────────────────────────────────────────── */
  --ss-ok-bg:#dcfce7;      --ss-ok-fg:#166534;
  --ss-warn-bg:#fef3c7;    --ss-warn-fg:#92400e;
  --ss-info-bg:#dbeafe;    --ss-info-fg:#1e40af;
  --ss-danger-bg:#fee2e2;  --ss-danger-fg:#991b1b;
  --ss-neutral-bg:#f4f4f5; --ss-neutral-fg:#3f3f46;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --ss-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --ss-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --ss-text-xs:   .8rem;     /* 12.8px */
  --ss-text-sm:   .875rem;   /* 14px   */
  --ss-text-base: 1rem;      /* 16px   */
  --ss-text-md:   1.0625rem; /* 17px — prose */
  --ss-text-lg:   1.125rem;  /* 18px   */
  --ss-text-xl:   1.25rem;   /* 20px   */
  --ss-text-2xl:  1.5rem;    /* 24px   */
  --ss-text-3xl:  1.875rem;  /* 30px   */
  --ss-text-4xl:  2.25rem;   /* 36px   */
  --ss-text-5xl:  3rem;      /* 48px   */

  --ss-leading-tight: 1.2;
  --ss-leading-snug:  1.4;
  --ss-leading-body:  1.7;

  --ss-weight-normal:   400;
  --ss-weight-medium:   500;
  --ss-weight-semibold: 600;
  --ss-weight-bold:     700;

  --ss-tracking-tight: -.02em;  /* large headings */

  /* ── Space / layout ───────────────────────────────────────────────────── */
  --ss-container: 72rem;  /* page max width: nav, footer, wide grids */
  --ss-measure:   42rem;  /* reading width: prose (blog, about)      */
  --ss-gutter:    1.5rem; /* horizontal page padding                 */

  --ss-radius-sm:   .375rem;
  --ss-radius:      .5rem;
  --ss-radius-lg:   .75rem;
  --ss-radius-full: 9999px;

  --ss-shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
  --ss-shadow:    0 1px 3px rgba(24, 24, 27, .08), 0 1px 2px rgba(24, 24, 27, .04);

  --ss-nav-h: 4rem;
}