/* SY Books — design tokens
   "See yourself clearly." Cool, literary, grounded palette.
   Implement as CSS custom properties. Colors, radii, space and type
   families are tokens; one-off layout values stay inline. */

:root {
  /* ---- Color ---- */
  --sy-paper:     #EAECE7;  /* app background */
  --sy-surface:   #F7F8F5;  /* cards, panels */
  --sy-ink:       #262A2F;  /* headings, body text; dark surfaces */
  --sy-ink-soft:  #575F68;  /* secondary text */
  --sy-ink-mute:  #868D95;  /* captions, hints */
  --sy-line:      #DBDED9;  /* borders, dividers */

  --sy-teal:      #2F6C6A;  /* PRIMARY action, brand mark */
  --sy-teal-deep: #234E4D;  /* hover / pressed */
  --sy-slate:     #5B6B7B;  /* Starter tier, calm accents */
  --sy-plum:      #7C5570;  /* Mastery tier, eyebrow/label accent */
  --sy-plum-lt:   #C9A6C0;  /* accents on dark backgrounds */

  /* Tier identity (top-border / chips) */
  --sy-tier-starter: var(--sy-slate);
  --sy-tier-builder: var(--sy-teal);
  --sy-tier-mastery: var(--sy-plum);

  /* Semantic (workbook feedback) */
  --sy-affirm-bg: #E1EBE8;  --sy-affirm-bd: #2F6C6A;  --sy-affirm-fg: #234E4D;
  --sy-caution-bg:#F1E2EA;  --sy-caution-bd:#8E5B7E;  --sy-caution-fg:#63415A;

  /* ---- Radius (soft / approachable POV) ---- */
  --sy-r-sm:   10px;  /* inputs */
  --sy-r-md:   16px;  /* cards */
  --sy-r-lg:   22px;  /* large panels */
  --sy-r-pill: 999px; /* chips, toggles, primary CTAs on marketing */

  /* ---- Space (8pt rhythm) ---- */
  --sy-1: 8px;  --sy-2: 16px; --sy-3: 24px;
  --sy-4: 40px; --sy-5: 64px; --sy-6: 96px;

  /* ---- Type ---- */
  --sy-display: 'Newsreader', Georgia, serif;   /* headlines, book titles */
  --sy-body:    'Public Sans', system-ui, sans-serif; /* UI, long-form reading */
  --sy-mono:    ui-monospace, Menlo, monospace;

  /* Type scale (font-size / role) */
  --sy-d1: 52px;  /* display 1 — page heroes (up to 64px on marketing) */
  --sy-d2: 34px;  /* display 2 — section titles */
  --sy-d3: 24px;  /* display 3 — card / book titles */
  --sy-body-lg: 18px;
  --sy-body-md: 17px; /* reading body — line-height 1.6 */
  --sy-meta: 13px;    /* uppercase labels, letter-spacing 0.4–2px, --sy-plum */

  /* ---- Motion (steady, grounded — never bouncy) ---- */
  --sy-ease: cubic-bezier(.2, .0, .1, 1);
  --sy-fast: 180ms;
  --sy-base: 260ms;
}