/* ==========================================================================
   Sticker Slab — Design Tokens
   All fallbacks below are overridden at runtime by the inline :root block
   in default.hbs, which is driven by Ghost custom settings. Never hard-code
   a hex or radius in a component rule — reference one of these vars.
   ========================================================================== */

:root {
  /* Color — surfaces & ink */
  --ts-bg:        #E8E8E8;
  --ts-surface:   #FBFBFB;
  --ts-ink:       #1A1A1A;

  /* Color — accents (position-cycled by nth-child on link rows) */
  --ts-accent-1:  #1975BA;   /* royal blue — primary links/buttons */
  --ts-accent-2:  #7BA46F;   /* green */
  --ts-accent-3:  #C97B9B;   /* pink */
  --ts-accent-4:  #1A1A1A;   /* black */
  --ts-gold:      #C9A24B;   /* gold lozenge outline */

  /* Derived color utilities */
  --ts-ink-soft:  rgba(26, 26, 26, 0.65);
  --ts-ink-mute:  rgba(26, 26, 26, 0.45);
  --ts-ink-line:  rgba(26, 26, 26, 0.12);

  /* Ghost native accent — kept in sync so the Admin picker still works,
     but --ts-accent-1 takes precedence in the theme. */
  --ghost-accent-color: var(--ts-accent-1);

  /* Shape & depth */
  --ts-radius:      18px;
  --ts-radius-sm:   10px;
  --ts-radius-pill: 999px;
  --ts-border-w:    3px;

  --ts-shadow-x:    0px;
  --ts-shadow-y:    6px;
  --ts-shadow-blur: 0px;

  /* Signature "sticker" drop shadow */
  --ts-shadow-sticker:
    var(--ts-shadow-x) var(--ts-shadow-y) var(--ts-shadow-blur) var(--ts-ink);
  --ts-shadow-sticker-sm:
    0px 3px 0px var(--ts-ink);

  /* Typography — Lubalin/Montserrat with metric-matched fallbacks
     (defined in base.css). The Fallback fonts wrap Georgia / Arial
     with size + ascent + descent overrides so the pre-load render
     matches the custom-font layout. No visible reflow on swap. */
  --ts-font-heading: "ITC Lubalin Graph Std Demi", "Lubalin Fallback",
                     Georgia, "Times New Roman", serif;
  --ts-font-body:    "Montserrat", "Montserrat Fallback", Arial,
                     "Helvetica Neue", sans-serif;

  --ts-fs-xs:    0.75rem;   /* 12px */
  --ts-fs-sm:    0.875rem;  /* 14px */
  --ts-fs-md:    1rem;      /* 16px */
  --ts-fs-lg:    1.125rem;  /* 18px */
  --ts-fs-xl:    1.375rem;  /* 22px */
  --ts-fs-2xl:   1.75rem;   /* 28px */
  --ts-fs-3xl:   2.25rem;   /* 36px */
  --ts-fs-4xl:   3rem;      /* 48px */
  --ts-fs-5xl:   4rem;      /* 64px */

  /* Spacing scale */
  --ts-space-1:  0.25rem;
  --ts-space-2:  0.5rem;
  --ts-space-3:  0.75rem;
  --ts-space-4:  1rem;
  --ts-space-5:  1.5rem;
  --ts-space-6:  2rem;
  --ts-space-7:  3rem;
  --ts-space-8:  4rem;

  /* Layout */
  --ts-container: 1200px;
  --ts-container-narrow: 780px;

  /* Motion */
  --ts-t-fast: 120ms;
  --ts-t-med:  220ms;
  --ts-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
}