/* Pibbl design tokens — the single source for the shared palette.
   These values used to be declared by hand in index.html, blog/blog.css,
   landing.css and 404.html. They agreed, but nothing enforced it, and
   styles.css had already drifted to the retired v1 brand. One file now, so
   drift is not possible.

   Contrast notes for the values that carry text:
     --muted       4.54:1 on --bg   (was #94A3B8, 2.34:1)
     --coral       4.52:1 on --bg   (was #F97316, 2.45:1)
     --teal        4.50:1 on --bg   (was #0D9488, 3.32:1)
     --amber-text  4.51:1 on --bg   — use this for text
     --amber-dark  fill only: hover of the amber buttons, whose label is
                   --ink (5.60:1). Do not use it for small text.

   The legal pages are deliberately not on this file yet; they are still on
   the retired v1 brand and are tracked as their own piece of work. */

:root {
  --amber:       #F59E0B;
  --amber-light: #FDE68A;
  --amber-dark:  #D97706;
  --amber-text:  #A55A05;
  --coral:       #B64D05;
  --teal:        #0B7C72;
  --teal-light:  #CCFBF1;
  --navy:        #1E293B;
  --ink:         #0F172A;
  --slate:       #475569;
  --muted:       #5E718D;
  --border:      #E2E8F0;
  --bg:          #FFFBF5;
  --white:       #FFFFFF;
  --card:        #FFFFFF;
  --warm-50:     #FFF7ED;
  --warm-100:    #FFEDD5;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 4px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 12px 48px rgba(15, 23, 42, 0.14);

  /* ── Type scale ──
     Every card H3 shipped at 1rem, identical to body, so the page had two
     levels of hierarchy where the content needed three. --step-3 is the
     card-title step. H1 and section H2 keep their existing clamps. */
  --step-3:      1.375rem;
  --step-body:   1rem;
  --step-small:  0.875rem;

  /* ── Spacing scale ──
     Every section shipped at 80px 0, so no section read as more important
     than any other. Three steps: loose for the tentpoles (the live example,
     pricing), base for most, tight for the small supporting sections. */
  --space-tight:   64px;
  --space-section: 96px;
  --space-loose:   128px;

  /* ── Surfaces ──
     These were literal hex values repeated by hand through index.html
     (33 distinct background declarations, most of them these six). The
     platform brand colours stay literal: they are not ours to tokenise. */
  --surface:       #F8FAFC;
  --slate-100:     #F1F5F9;
  --amber-100:     #FEF3C7;
  --warm-border:   #E7E2D8;
  --navy-deep:     #0B1F3A;

  /* Form borders. --border is 1.20:1 on --bg, well under the 3:1 that
     WCAG 1.4.11 asks of a control boundary. This clears it: 3.41:1 on
     --white, 3.31:1 on --bg. --border stays for decorative card edges. */
  --border-strong: #7C8CA5;
}