/* ============================================================
   PAPERBIT — token primitives
   ------------------------------------------------------------
   Single source of truth for the design direction. Components
   consume only the semantic tokens (bottom block); retheme by
   editing primitives, or swap the whole direction by replacing
   the semantic mappings.
   ============================================================ */

:root {
  /* ---- color primitives: paper ---- */
  /* matched to the existing shell: cream section ground + white sheets */
  --pb-paper-050: #ffffff;   /* bright sheet   */
  --pb-paper-100: #fbfaf3;   /* page ground (shell cream) */
  --pb-paper-200: #f2eee2;   /* recessed panel */
  --pb-paper-300: #e7dfcd;   /* deep panel     */

  /* ---- color primitives: ink ---- */
  /* matched to the shell's heading/body/muted grays */
  --pb-ink-900: #292824;     /* full ink (shell headings) */
  --pb-ink-700: #46443f;     /* body           */
  --pb-ink-500: #6c6962;     /* muted          */
  --pb-ink-300: #9a958a;     /* faint          */

  /* ---- color primitives: signal ---- */
  --pb-bronze-600: #725726;  /* shell link bronze        */
  --pb-bronze-700: #4f3b18;  /* pressed / hover          */
  --pb-signal-600: #c2401f;  /* field-manual red-orange (reserved) */
  --pb-signal-700: #9e3115;  /* pressed / hover                    */
  --pb-blueprint-600: #4f7696; /* secondary technical blue */

  /* ---- type primitives ---- */
  --pb-font-display: "Apple Garamond Regular", "Apple Garamond", Georgia, serif;
  --pb-font-body: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --pb-font-mono: ui-monospace, "SF Mono", "Menlo", "IBM Plex Mono", monospace;

  /* modular scale — clamp() keeps it fluid between 375px and 1440px */
  --pb-text-2xs: 0.6875rem;                              /* 11px labels   */
  --pb-text-xs: 0.75rem;                                 /* 12px captions */
  --pb-text-sm: 0.875rem;                                /* 14px          */
  --pb-text-md: 1.0625rem;                                /* 17px body     */
  --pb-text-lg: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --pb-text-xl: clamp(1.75rem, 1.4rem + 1.25vw, 2.5rem);
  --pb-text-2xl: clamp(2.35rem, 1.8rem + 2.25vw, 4rem);
  --pb-text-3xl: clamp(3.15rem, 2.2rem + 3.9vw, 5.25rem);

  --pb-leading-tight: 1.12;
  --pb-leading-snug: 1.3;
  --pb-leading-body: 1.65;
  --pb-tracking-label: 0.08em;   /* uppercase mono labels */
  --pb-tracking-wide: 0.14em;

  /* ---- space primitives (4px base) ---- */
  --pb-space-1: 0.25rem;
  --pb-space-2: 0.5rem;
  --pb-space-3: 0.75rem;
  --pb-space-4: 1rem;
  --pb-space-6: 1.5rem;
  --pb-space-8: 2rem;
  --pb-space-12: 3rem;
  --pb-space-16: 4rem;
  --pb-space-24: 6rem;

  /* ---- rules, borders, geometry ---- */
  --pb-hairline: 1px solid var(--pb-ink-900);
  --pb-hairline-faint: 1px solid color-mix(in srgb, var(--pb-ink-900) 22%, transparent);
  --pb-rule-dotted: 1px dotted color-mix(in srgb, var(--pb-ink-900) 40%, transparent);
  --pb-radius-0: 0;            /* PAPERBIT is square-cornered  */
  --pb-radius-plate: 2px;      /* only for tiny chips          */
  --pb-measure: 62ch;          /* comfortable reading width    */
  --pb-page-max: 1184px;
  --pb-page-pad: clamp(24px, 4.4vw, 56px);

  /* ---- semantic tokens (what components consume) ---- */
  --pb-bg: var(--pb-paper-100);
  --pb-bg-raised: var(--pb-paper-050);
  --pb-bg-recessed: var(--pb-paper-200);
  --pb-fg: var(--pb-ink-900);
  --pb-fg-body: var(--pb-ink-700);
  --pb-fg-muted: var(--pb-ink-500);
  --pb-fg-faint: var(--pb-ink-300);
  --pb-accent: var(--pb-bronze-600);
  --pb-accent-strong: var(--pb-bronze-700);
  --pb-technical: var(--pb-blueprint-600);
  --pb-rule: rgba(0, 0, 0, 0.12);
  --pb-rule-strong: rgba(0, 0, 0, 0.32);
  --pb-radius-media: 10px;   /* matches the shell's rounded imagery */
  --pb-shadow-media: 0 18px 48px rgba(51, 43, 27, 0.08);
}