/*
 * tokens.css — GENERATED by Style Dictionary. DO NOT EDIT.
 *
 * Source of truth: tokens/tokens.json
 * Regenerate:      npm run build:tokens
 *
 * Three layers, three prefixes:
 *   --p-*   primitive (raw values, never reference from components)
 *   --s-*   semantic  (roles, reference these from components)
 *   --c-*   component (named bundles — reserved, not yet emitted)
 */

:root {

  /* ============================================================
   * PRIMITIVE — raw values
   * ============================================================ */

  /* color */
  --p-olive-50: #f3f5ed;
  --p-olive-100: #e2e6d4;
  --p-olive-300: #a8b186;
  --p-olive-500: #5c6b3a;
  --p-olive-700: #3f4a28;
  --p-olive-900: #2e361c;
  --p-cream-50: #ffffff;
  --p-cream-100: #f9f6f3;
  --p-cream-200: #efe9e2;
  --p-cream-300: #e6dccf;
  --p-ink-300: #8a7d8f;
  --p-ink-500: #5a5060;
  --p-ink-700: #3a3142;
  --p-ink-900: #1b1624;
  --p-warm-brown-900: #23201d;
  --p-accent-yellow: #f4c25c;
  --p-accent-coral: #e89a8b;
  --p-accent-brick: #c53a1f;
  --p-shadow-warm-sm: rgba(193,175,153,0.35);
  --p-shadow-warm-md: rgba(120,95,70,0.28);
  --p-shadow-warm-lg: rgba(120,95,70,0.35);

  /* size */
  --p-size-0: 0px;
  --p-size-1: 4px;
  --p-size-2: 8px;
  --p-size-3: 12px;
  --p-size-4: 16px;
  --p-size-5: 24px;
  --p-size-6: 32px;
  --p-size-7: 48px;
  --p-size-8: 64px;
  --p-size-9: 96px;
  --p-size-10: 128px;
  --p-size-11: 160px;

  /* radius */
  --p-radius-none: 0px;
  --p-radius-sm: 8px;
  --p-radius-md: 16px;
  --p-radius-lg: 28px;
  --p-radius-pill: 9999px;

  /* font-family */
  --p-font-display: "Fraunces", "Recoleta", Georgia, serif;
  --p-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* font-weight */
  --p-weight-light: 300;
  --p-weight-regular: 400;
  --p-weight-medium: 500;
  --p-weight-semibold: 600;
  --p-weight-bold: 700;

  /* font-size */
  --p-text-11: 11px;
  --p-text-12: 12px;
  --p-text-13: 13px;
  --p-text-14: 14px;
  --p-text-15: 15px;
  --p-text-16: 16px;
  --p-text-17: 17px;
  --p-text-18: 18px;
  --p-text-19: 19px;
  --p-text-20: 20px;
  --p-text-22: 22px;
  --p-text-26: 26px;
  --p-text-30: 30px;
  --p-text-34: 34px;
  --p-text-38: 38px;
  --p-text-44: 44px;
  --p-text-56: 56px;
  --p-text-72: 72px;
  --p-text-84: 84px;

  /* line-height */
  --p-lh-tight: 0.98;
  --p-lh-snug: 1.08;
  --p-lh-heading: 1.18;
  --p-lh-body: 1.55;
  --p-lh-loose: 1.7;

  /* letter-spacing */
  --p-ls-tighter: -0.025em;
  --p-ls-tight: -0.02em;
  --p-ls-snug: -0.015em;
  --p-ls-normal: 0;
  --p-ls-wide: 0.08em;
  --p-ls-wider: 0.14em;

  /* duration */
  --p-duration-fast: 150ms;
  --p-duration-base: 200ms;
  --p-duration-slow: 300ms;
  --p-duration-slower: 700ms;

  /* easing */
  --p-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --p-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --p-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* z-index */
  --p-z-behind: -1;
  --p-z-base: 0;
  --p-z-raised: 10;
  --p-z-sticky: 50;
  --p-z-overlay: 100;
  --p-z-modal: 1000;
  --p-z-toast: 1100;

  /* breakpoint */
  --p-breakpoint-sm: 640px;
  --p-breakpoint-md: 900px;
  --p-breakpoint-lg: 1240px;
  --p-breakpoint-xl: 1440px;

  /* ============================================================
   * SEMANTIC — roles
   * ============================================================ */

  /* color */
  --s-surface-base: var(--p-cream-100);
  --s-surface-raised: var(--p-cream-50);
  --s-surface-sunken: var(--p-cream-200);
  --s-surface-depth: var(--p-cream-300);
  --s-surface-inverse: var(--p-warm-brown-900);
  --s-text-primary: var(--p-ink-900);
  --s-text-secondary: var(--p-ink-700);
  --s-text-muted: var(--p-ink-500);
  --s-text-soft: var(--p-ink-300);
  --s-text-inverse: var(--p-cream-100);
  --s-text-brand: var(--p-olive-700);
  --s-action-primary-bg: var(--p-olive-700);
  --s-action-primary-bg-hover: var(--p-olive-900);
  --s-action-primary-fg: var(--p-cream-100);
  --s-action-ghost-bg: transparent;
  --s-action-ghost-bg-hover: var(--p-cream-200);
  --s-action-ghost-fg: var(--p-ink-900);
  --s-action-ghost-border: rgba(27,22,36,0.18);
  --s-action-ghost-border-hover: var(--p-ink-900);
  --s-accent-warm: var(--p-accent-yellow);
  --s-accent-soft: var(--p-accent-coral);
  --s-accent-strong: var(--p-accent-brick);
  --s-border-subtle: rgba(27,22,36,0.06);
  --s-border-muted: rgba(27,22,36,0.08);
  --s-border-strong: rgba(27,22,36,0.18);

  /* shadow */
  --s-shadow-sm: 0 1px 2px var(--p-shadow-warm-sm);
  --s-shadow-md: 0 8px 24px -8px var(--p-shadow-warm-md);
  --s-shadow-lg: 0 24px 60px -20px var(--p-shadow-warm-lg);

  /* radius */
  --s-radius-control: var(--p-radius-pill);
  --s-radius-card: var(--p-radius-lg);
  --s-radius-panel: var(--p-radius-md);
  --s-radius-subtle: var(--p-radius-sm);

  /* spacing */
  --s-space-xs: var(--p-size-2);
  --s-space-sm: var(--p-size-3);
  --s-space-md: var(--p-size-4);
  --s-space-lg: var(--p-size-5);
  --s-space-xl: var(--p-size-6);
  --s-space-2xl: var(--p-size-7);
  --s-space-3xl: var(--p-size-8);
  --s-space-section-y: var(--p-size-9);
  --s-space-gutter: var(--p-size-5);

  /* motion */
  --s-motion-hover: var(--p-duration-base) var(--p-ease-out);
  --s-motion-press: var(--p-duration-fast) var(--p-ease-standard);
  --s-motion-enter: var(--p-duration-slower) var(--p-ease-out);
}

/* ============================================================
 * RESET (minimal, opinionated)
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--s-surface-base);
  color: var(--s-text-primary);
  font-family: var(--p-font-body);
  font-size: var(--p-text-17);
  line-height: var(--p-lh-body);
  font-weight: var(--p-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
 * NAMED TEXT STYLES
 * Use these utility classes for text. Don't roll your own.
 * ============================================================ */
.t-display-xl {
  font-family: var(--p-font-display); font-weight: var(--p-weight-regular);
  font-size: clamp(44px, 6.2vw, var(--p-text-84));
  line-height: var(--p-lh-tight); letter-spacing: var(--p-ls-tighter);
}
.t-display-lg {
  font-family: var(--p-font-display); font-weight: var(--p-weight-regular);
  font-size: clamp(34px, 4.4vw, var(--p-text-56));
  line-height: var(--p-lh-snug); letter-spacing: var(--p-ls-tight);
}
.t-display-md {
  font-family: var(--p-font-display); font-weight: var(--p-weight-regular);
  font-size: clamp(28px, 3.2vw, var(--p-text-38));
  line-height: var(--p-lh-heading); letter-spacing: var(--p-ls-snug);
}
.t-heading-lg {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-26);
  line-height: var(--p-lh-heading); letter-spacing: var(--p-ls-snug);
}
.t-heading-md {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-22);
  line-height: var(--p-lh-heading); letter-spacing: var(--p-ls-snug);
}
.t-body-lg { font-size: var(--p-text-19); line-height: var(--p-lh-body); }
.t-body-md { font-size: var(--p-text-17); line-height: var(--p-lh-body); }
.t-body-sm { font-size: var(--p-text-15); line-height: var(--p-lh-body); }
.t-label   { font-size: var(--p-text-15); font-weight: var(--p-weight-semibold); }
.t-caption { font-size: var(--p-text-13); font-weight: var(--p-weight-medium); color: var(--s-text-muted); }
.t-eyebrow {
  font-size: var(--p-text-12); font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-wider); text-transform: uppercase;
  color: var(--s-text-muted);
}