/* Artisory Brand Media — design tokens
   Single source of truth for colour, type, spacing, radii and shadows.
   Every value below is taken verbatim from the approved design. */

:root {
  /* ---- Colour ---- */
  --c-ink:            #1B1815;  /* rgb(27,24,21)    primary text, dark bands */
  --c-ink-raised:     #242019;  /* rgb(36,32,25)    hover state on ink cards */
  --c-paper:          #F5F1EA;  /* rgb(245,241,234) page background */
  --c-paper-2:        #EFE9DF;  /* rgb(239,233,223) alternate band */
  --c-card:           #FBF9F5;  /* rgb(251,249,245) card surface */
  --c-card-2:         #F0EBE2;  /* rgb(240,235,226) inset surface (planner cells, prompts) */
  --c-placeholder:    #E6DFD2;  /* rgb(230,223,210) image placeholder tone */
  --c-terracotta:     #C2643A;  /* rgb(194,100,58)  decorative accent, badges, dots */
  --c-terracotta-ink: #A94E22;  /* rgb(169,78,34)   accent for text/links/buttons on paper */
  --c-terracotta-lt:  #E0865C;  /* rgb(224,134,92)  accent for text on ink */
  --c-cream:          #FBF3EC;  /* rgb(251,243,236) text on terracotta */
  --c-sage:           #5E7F6E;  /* rgb(94,127,110)  planner "community" dot only */
  --c-text-muted:     #514B43;  /* rgb(81,75,67)    body copy */
  --c-text-muted-2:   #6B655C;  /* rgb(107,101,92)  mono notes, captions */
  --c-error-bg:       #FBEDE6;  /* rgb(251,237,230) */
  --c-error-border:   #E7B9A3;  /* rgb(231,185,163) */
  --c-error-text:     #8A3A14;  /* rgb(138,58,20) */
  --c-white:          #FFFFFF;  /* form field background */

  /* Alpha rules — derived from ink/paper, not new colours */
  --c-line:            rgba(27,24,21,.08);
  --c-line-strong:     rgba(27,24,21,.15);
  --c-line-strongest:  rgba(27,24,21,.25);
  --c-border-btn:      rgba(27,24,21,.35);
  --c-border-input:    rgba(27,24,21,.2);
  --c-hover-tint:      rgba(27,24,21,.06);
  --c-on-ink-70:       rgba(245,241,234,.7);
  --c-on-ink-72:       rgba(245,241,234,.72);
  --c-on-ink-75:       rgba(245,241,234,.75);
  --c-on-ink-78:       rgba(245,241,234,.78);
  --c-on-ink-line:     rgba(245,241,234,.15);
  --c-on-ink-border:   rgba(245,241,234,.35);
  --c-header-bg:       rgba(245,241,234,.86);

  /* ---- Type ---- */
  --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type steps (clamp min / preferred / max) */
  --t-hero:      clamp(44px, 6vw, 80px);
  --t-page-h1:   clamp(42px, 5.6vw, 76px);
  --t-page-h1-s: clamp(40px, 5vw, 64px);   /* legal pages */
  --t-h2:        clamp(36px, 4.4vw, 60px);
  --t-h2-sm:     clamp(28px, 3vw, 40px);
  --t-h3:        28px;
  --t-h3-sm:     24px;
  --t-lede:      clamp(17px, 1.4vw, 19px);
  --t-body:      clamp(17px, 1.3vw, 19px);
  --t-base:      16px;
  --t-sm:        15.5px;
  --t-xs:        14.5px;
  --t-mono-lg:   12.5px;
  --t-mono:      12px;
  --t-mono-sm:   11px;
  --t-mono-xs:   9.5px;

  --lh-tight:  1;
  --lh-head:   1.02;
  --lh-card:   1.1;
  --lh-body:   1.65;
  --lh-lede:   1.6;

  --ls-display: -.025em;
  --ls-card:    -.015em;
  --ls-mono:    .16em;
  --ls-mono-sm: .14em;
  --ls-brand:   .22em;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 10px; --s-5: 12px;
  --s-6: 14px; --s-7: 16px; --s-8: 18px; --s-9: 20px; --s-10: 22px;
  --s-11: 24px; --s-12: 28px; --s-13: 32px; --s-14: 40px; --s-15: 48px;
  --s-16: 64px; --s-17: 80px; --s-18: 96px; --s-19: 128px;

  /* Fluid rhythm */
  --pad-x:         clamp(20px, 4vw, 40px);   /* container gutter */
  --sec-y:         clamp(64px, 9vw, 128px);  /* standard section block */
  --sec-y-top:     clamp(48px, 7vw, 96px);   /* first section on a page */
  --gap-col:       clamp(28px, 5vw, 80px);   /* two-column editorial gap */
  --gap-stack:     clamp(40px, 5vw, 64px);   /* stacked groups inside a section */
  --pad-card:      clamp(24px, 2.6vw, 36px);
  --pad-cta:       clamp(40px, 6vw, 88px);

  /* ---- Container ---- */
  --container: 1240px;
  --header-h:  72px;

  /* ---- Radii ---- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   18px;
  --r-2xl:  20px;
  --r-3xl:  22px;
  --r-4xl:  28px;
  --r-phone: 38px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-card:  0 24px 50px -30px rgba(27,24,21,.35);
  --sh-lift:  0 24px 40px -28px rgba(27,24,21,.4);
  --sh-phone: 0 40px 80px -30px rgba(27,24,21,.45);
  --sh-pdf:   0 30px 50px -30px rgba(27,24,21,.6);

  /* ---- Motion ---- */
  --dur-fast: .2s;
  --dur-med:  .25s;
  --ease:     ease;
}

/* ---- Breakpoints (documented; used in responsive.css) ----
   >= 960px  desktop   full horizontal nav
   < 960px   tablet    hamburger menu, grids collapse intrinsically
   <= 768px  tablet-p  hero stacks, footer 2-up
   <= 600px  mobile    single column everywhere, tighter type
   Design widths referenced in /screenshots: 1440 / 768 / 390
*/