/* Arc Grove foundational tokens — adapted from
   arcgrove-website/design-system/colors_and_type.css (source of truth).
   Token names and values unchanged; semantic element styles trimmed to what this tool uses. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Alata&family=Inter+Tight:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --ag-sage:           #465849;
  --ag-dark-sage:      #4B544C;
  --ag-green-black:    #242B26;
  --ag-white:          #FFFFFF;
  --ag-off-white:      #f9fafb;
  --ag-muted-gray:     #7B7B7B;
  --ag-sage-10:        rgba(70,88,73,0.1);
  --ag-half-white:     #f4f4f4;
  --ag-hairline:       rgba(0,0,0,0.1);
  --ag-hairline-strong:#e0e0e0;
  --ag-badge-quickship:#a48453;
  --ag-badge-custom:   #433e38;

  --fg-1: var(--ag-green-black);
  --fg-2: var(--ag-muted-gray);
  --fg-inverse: var(--ag-white);
  --fg-link: var(--ag-sage);
  --fg-link-hover: var(--ag-dark-sage);
  --bg-page: var(--ag-white);
  --bg-section: var(--ag-off-white);
  --bg-hover-subtle: var(--ag-sage-10);
  --border-soft: var(--ag-hairline);
  --border-strong: var(--ag-hairline-strong);

  --ff-display: 'Playfair Display', 'Times New Roman', serif;
  --ff-ui:      'Alata', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px;
  --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  --radius-0: 0;
  --radius-pill: 100px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;

  --tracking-ui: 0.8px;
  --tracking-btn: 0.96px;
}

html { font-family: var(--ff-body); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--ff-body); color: var(--fg-1); line-height: 1.5; }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); }
::selection { background: var(--ag-dark-sage); color: var(--ag-white); }