/* tokens/fonts.css */
/* Claude Design preview webfonts, loaded from Google Fonts.
   Libre Baskerville  -> the Baskerville role (--ds-font-heading)
   Great Vibes        -> the Samantha role   (--ds-font-script)
   Montserrat         -> functional UI       (--ds-font-ui), exact brand match

   Production targets: Baskerville and Samantha, subject to licensing. Swapping to
   them later means adding @font-face rules here and renaming the family in
   tokens/typography.css — the semantic token names do not change. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;500;600;700&family=Great+Vibes&display=swap");

/* tokens/colors.css */
:root{
  /* Core brand palette — locked. Do not add or alter. */
  --ds-brown:#5A4636;
  --ds-terracotta:#C47A5A;
  --ds-sage:#8DA08C;
  --ds-sand:#E6DED0;
  --ds-cream:#F7F3EC;
  --ds-taupe:#B5AA9C;

  /* Accessible functional derivatives — never used as logo colors */
  --ds-terracotta-deep:#9A5334;
  --ds-terracotta-deeper:#843F24;      /* primary hover, ~8% darker */
  --ds-sage-deep:#5C6B58;

  /* Semantic surfaces */
  --ds-surface:var(--ds-cream);
  --ds-surface-alt:var(--ds-sand);
  --ds-surface-card:var(--ds-cream);
  --ds-surface-inverse:var(--ds-brown);

  /* Semantic text */
  --ds-text:var(--ds-brown);
  --ds-text-secondary:rgba(90,70,54,.74);
  --ds-text-muted:rgba(90,70,54,.56);
  --ds-text-inverse:var(--ds-cream);
  --ds-text-on-action:var(--ds-cream);

  /* Lines */
  --ds-border:var(--ds-taupe);
  --ds-border-soft:rgba(90,70,54,.20);
  --ds-border-hairline:rgba(90,70,54,.14);
  --ds-rule:rgba(181,170,156,.55);

  /* Action + state */
  --ds-action:var(--ds-terracotta-deep);
  --ds-action-hover:var(--ds-terracotta-deeper);
  --ds-action-text:var(--ds-cream);
  --ds-focus:var(--ds-sage-deep);
  --ds-focus-ring:0 0 0 3px rgba(92,107,88,.55);
  --ds-error:var(--ds-terracotta-deep);
  --ds-success:var(--ds-sage-deep);
  --ds-disabled-bg:rgba(181,170,156,.38);
  --ds-disabled-text:rgba(90,70,54,.42);

  /* Decorative-only — never small text */
  --ds-accent-script:var(--ds-terracotta);
  --ds-accent-botanical:var(--ds-sage);

  /* Sage patterns — Muted Sage carries surfaces, Deep Sage carries anything small.
     Budget sage at roughly 10–15% of a page; see readme.md > Sage. */
  --ds-band-quote:var(--ds-sage);            /* full-width testimonial / founder-quote band */
  --ds-on-band-quote:var(--ds-brown);        /* only at 26px+; never small text on sage */
  --ds-sage-tint:rgba(141,160,140,.16);      /* numbered process markers, soft fills */
  --ds-sage-tint-strong:rgba(141,160,140,.28);
  --ds-sage-rule:rgba(92,107,88,.28);        /* trust/stat-strip dividers and hairlines */
  --ds-label-sage:var(--ds-sage-deep);       /* eyebrows and section labels on cream */
  --ds-icon-sage:var(--ds-sage-deep);        /* 1.6px Lucide strokes */
  --ds-marker-sage:var(--ds-sage-deep);      /* process-step and timeline numerals */
  --ds-link-hover-secondary:var(--ds-sage-deep);
  --ds-nav-active:var(--ds-sage-deep);       /* active underline; terracotta stays the CTA */
}

/* tokens/typography.css */
:root{
  /* Claude Design preview families. Production targets are Baskerville (heading role)
     and Samantha (script role), pending licensing — see readme.md > Fonts. */
  --ds-font-heading:"Libre Baskerville",Georgia,serif;
  --ds-font-script:"Great Vibes","Brush Script MT",cursive;
  --ds-font-ui:Montserrat,"Helvetica Neue",Arial,sans-serif;

  /* Display script — 2–6 words max, never body or nav, never below 24px */
  --ds-script-lg:72px; --ds-script-md:56px; --ds-script-sm:48px; --ds-script-line:1; /* @kind other */

  /* Editorial serif scale */
  --ds-h1:64px;   --ds-h1-line:1.08; /* @kind other */
  --ds-h1-sm:44px;
  --ds-h2:40px;   --ds-h2-line:1.15; /* @kind other */
  --ds-h3:26px;   --ds-h3-line:1.25; /* @kind other */
  --ds-body-lg:20px; --ds-body-lg-line:1.65; /* @kind other */
  --ds-body:17.5px;  --ds-body-line:1.7; /* @kind other */
  --ds-body-sm:15.5px; --ds-body-sm-line:1.6; /* @kind other */
  --ds-body-min:16px;

  /* Functional sans scale */
  --ds-label:12px;   --ds-label-line:1.4; /* @kind other */  --ds-label-track:0.16em; /* @kind other */
  --ds-button:14px;  --ds-button-line:1; /* @kind other */
  --ds-caption:13px; --ds-caption-line:1.5; /* @kind other */
  --ds-nav:12px;     --ds-nav-track:0.08em; /* @kind other */

  --ds-weight-ui:500;
  --ds-weight-button:600;
  --ds-weight-heading:400;

  --ds-measure:68ch; /* @kind other */
}

/* tokens/spacing.css */
:root{
  /* 8px base rhythm */
  --ds-space-1:4px;  --ds-space-2:8px;   --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:20px; --ds-space-6:24px;  --ds-space-8:32px; --ds-space-10:40px;
  --ds-space-12:48px;--ds-space-16:64px; --ds-space-20:80px;--ds-space-24:96px;

  --ds-gutter-mobile:20px;
  --ds-gutter-tablet:32px;
  --ds-gutter-desktop:48px;
  --ds-gutter-wide:72px;

  --ds-section-mobile:64px;
  --ds-section-desktop:96px;

  --ds-tap-min:44px;
}

/* tokens/shape.css */
:root{
  --ds-radius-sm:4px;
  --ds-radius-md:8px;
  --ds-radius-lg:12px;
  --ds-radius-xl:16px;
  --ds-radius-pill:999px;

  --ds-border-width:1px;
  --ds-icon-stroke:1.6px; /* @kind other */

  /* Elevation is used sparingly; warm brown only, never neutral grey */
  --ds-shadow-card:0 8px 28px rgba(90,70,54,.10);
  --ds-shadow-raised:0 14px 40px rgba(90,70,54,.14);
  --ds-shadow-none:none;
}

/* tokens/layout.css */
:root{
  --ds-content-max:1120px;
  --ds-reading-max:720px;
  --ds-header-height:82px;

  --ds-bp-sm:480px;
  --ds-bp-md:768px;
  --ds-bp-lg:1024px;
  --ds-bp-xl:1280px;
}

/* tokens/motion.css */
:root{
  /* Quiet motion only: short fades and small translations. No bounce, no spring. */
  --ds-ease:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ds-dur-fast:120ms; /* @kind other */
  --ds-dur:180ms; /* @kind other */
  --ds-dur-slow:320ms; /* @kind other */
  --ds-transition-ui:background-color var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease),color var(--ds-dur) var(--ds-ease); /* @kind other */
}