/* ============================================================
   Finding Solace — design tokens
   Source: design.md / SKILL.md (TYPEUI_SH extraction)
   Deviations from the raw extraction are marked [ADJUSTED].
   ============================================================ */
:root {
  /* ---- Typography ---- */
  --font-family-primary: "Karla";
  --font-family-stack: "Karla", -apple-system, "Segoe UI", sans-serif;
  --font-size-base: 17px;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 28.05px;

  /* extracted micro-scale (labels, meta, captions) */
  --font-size-xs: 13.12px;
  --font-size-sm: 13.28px;
  --font-size-md: 13.33px;
  --font-size-lg: 13.6px;
  --font-size-xl: 14.08px;
  --font-size-2xl: 14.4px;
  --font-size-3xl: 14.88px;
  --font-size-4xl: 15.2px;

  /* [ADJUSTED] display scale — the extraction returned no heading sizes
     above 15.2px, which cannot express a page hierarchy. Fluid ramp added. */
  --font-size-display-1: clamp(3rem, 7vw, 5.25rem);
  --font-size-display-2: clamp(1.85rem, 3.4vw, 2.6rem);
  --font-size-display-3: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-body-lg: 1.125rem;

  /* ---- Color: blush / ivory / rose / beige / brown ---- */
  --color-blush: #e8c5c0;        /* decorative surfaces, on-dark text */
  --color-ivory: #f7f2e9;        /* page ground */
  --color-rose: #cfa5a0;         /* decorative accent — NOT for small text on light */
  --color-beige: #e5d6cc;        /* raised bands, chips */
  --color-brown: #2b2523;        /* ink, dark bands, primary buttons */

  --color-text-primary: var(--color-brown);
  --color-text-secondary: var(--color-blush);  /* AA only on dark surfaces */
  --color-text-tertiary: var(--color-brown);
  --color-text-inverse: var(--color-ivory);
  --color-surface-base: var(--color-brown);
  --color-surface-muted: #fffdfa;
  --color-surface-raised: var(--color-beige);
  --color-surface-strong: var(--color-ivory);

  /* semantic aliases */
  --color-page: var(--color-surface-strong);
  --color-card: var(--color-surface-muted);
  --color-band: var(--color-surface-raised);
  --color-band-soft: var(--color-blush);
  --color-ink-dark: var(--color-brown);
  --color-on-dark: var(--color-ivory);
  --color-on-dark-muted: var(--color-blush);   /* 9.3:1 on --color-brown */
  --color-body: #574b47;                       /* 7.4:1 on --color-page */
  --color-border: rgba(43, 37, 35, 0.14);
  --color-border-strong: rgba(43, 37, 35, 0.30);
  --color-accent: #7e4a45;                     /* 6.3:1 ivory / 5.1:1 beige */
  --color-accent-soft: var(--color-rose);      /* decorative only */
  --color-blush-band: #f7e8e4;                 /* soft warm blush band */
  --color-blush-blob: #e8c5c0;                 /* organic shape inside it */
  --color-leaf-breeze: #c0736f;                /* drifting leaves, deeper pink */
  --color-leaf: #dfa6a6;                       /* decorative botanical motif */
  --color-focus: var(--color-brown);
  --color-danger: #8c3a2c;                     /* 6.7:1 on --color-page */

  /* ---- Spacing ---- */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 6px;
  --space-6: 7px;
  --space-7: 8px;
  --space-8: 10px;
  /* [ADJUSTED] layout steps — extracted scale tops out at 10px, which cannot
     express section rhythm. Continues the same ramp. */
  --space-9: 16px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 48px;
  --space-13: 64px;
  --space-14: clamp(64px, 9vw, 112px);

  /* ---- Radius ---- */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 999px;

  /* ---- Elevation ---- */
  --shadow-1: rgba(43, 37, 35, 0.10) 0px 10px 30px 0px;

  /* ---- Motion ---- */
  --motion-duration-instant: 150ms;
  --motion-duration-fast: 300ms;
  --motion-duration-normal: 1100ms;
  --motion-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Layout ---- */
  --layout-max: 1120px;
  --layout-gutter: var(--space-10);
}