/* AddGardenLinks Design System — compiled stylesheet (v1, 2026-09-08)
   Single file: fonts, tokens, base resets and the .agl-* class layer.
   Drop at public/ds/addgardenlinks.css and link it once from your Blade layout. */

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Hanken+Grotesque:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ===== tokens/fonts.css ===== */
/* Webfonts — Google Fonts CDN.
   SUBSTITUTION FLAG: no licensed brand fonts were supplied for AddGardenLinks.
   Young Serif (display), Hanken Grotesque (UI/body), IBM Plex Mono (domains, metadata). */

:root {
  --font-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Hanken Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ===== tokens/colors.css ===== */
/* AddGardenLinks palette — a spring garden in full bloom on warm petal paper. */
:root {
  /* Paper — warm petal creams. No pure white. */
  --paper-1: #fffefa;
  --paper-2: #f6f3e9;
  --paper-3: #ebe7d8;
  --paper-4: #ddd8c5;

  /* Ink — deep leaf-blacks. No pure black, no cold gray. */
  --ink-1: #1e2a1c;
  --ink-2: #3a4a36;
  --ink-3: #6b7a66;
  --ink-4: #97a392;

  /* Leaf — the primary. New growth to deep hedge. */
  --leaf-1: #e8f3e4;
  --leaf-2: #a8d49b;
  --leaf-3: #5ca860;
  --leaf-4: #2e7d46;
  --leaf-5: #1c5432;

  /* Peony — the signature bloom. */
  --peony-1: #fdecf3;
  --peony-2: #f5a9c6;
  --peony-3: #de5c93;
  --peony-4: #b23a6e;

  /* Lilac */
  --lilac-1: #f0ecfb;
  --lilac-2: #c3b3ec;
  --lilac-3: #7c63c9;
  --lilac-4: #5a44a0;

  /* Buttercup */
  --sun-1: #fff4d6;
  --sun-2: #ffd466;
  --sun-3: #e8a11b;
  --sun-4: #a76f08;

  /* Cornflower */
  --sky-1: #e6f0fb;
  --sky-2: #9cc2ec;
  --sky-3: #4a83c7;
  --sky-4: #2e5c94;

  /* Clay — pots, terracotta, and the only alarm colour. */
  --clay-1: #fbeae2;
  --clay-2: #eda98a;
  --clay-3: #c4552f;
  --clay-4: #8f3a1e;

  /* ── Semantic aliases: prefer these ─────────────────────────── */
  --bg-page: var(--paper-2);
  --bg-page-alt: var(--paper-1);
  --surface-card: var(--paper-1);
  --surface-sunk: var(--paper-3);
  --surface-accent: var(--leaf-1);

  --text-heading: var(--ink-1);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --text-on-accent: #fffefa;
  --text-link: var(--leaf-4);
  --text-link-hover: var(--leaf-5);

  --accent: var(--leaf-4);
  --accent-hover: var(--leaf-5);
  --accent-soft: var(--leaf-1);
  --bloom: var(--peony-3);
  --bloom-soft: var(--peony-1);

  --border-soft: #e2ddcc;
  --border-strong: #cfc8b2;
  --border-accent: #bfdcb6;
  --border-focus: var(--leaf-3);

  --state-success: var(--leaf-4);
  --state-success-soft: var(--leaf-1);
  --state-warning: var(--sun-3);
  --state-warning-soft: var(--sun-1);
  --state-danger: var(--clay-3);
  --state-danger-soft: var(--clay-1);
  --state-info: var(--sky-3);
  --state-info-soft: var(--sky-1);

  /* Category hues — a directory needs one colour per bed. */
  --cat-grow: var(--leaf-3);
  --cat-grow-soft: var(--leaf-1);
  --cat-flowers: var(--peony-3);
  --cat-flowers-soft: var(--peony-1);
  --cat-design: var(--lilac-3);
  --cat-design-soft: var(--lilac-1);
  --cat-tools: var(--sun-3);
  --cat-tools-soft: var(--sun-1);
  --cat-wildlife: var(--sky-3);
  --cat-wildlife-soft: var(--sky-1);
  --cat-edible: var(--clay-3);
  --cat-edible-soft: var(--clay-1);
}

/* ===== tokens/typography.css ===== */
:root {
  /* Display — Young Serif. Organic, seed-catalogue weight. Only for headings. */
  --text-display-1: 3.75rem;   /* 60px */
  --text-display-2: 2.75rem;   /* 44px */
  --text-display-3: 2rem;      /* 32px */
  --text-title: 1.375rem;      /* 22px */
  --text-subtitle: 1.125rem;   /* 18px */
  --text-body-lg: 1.0625rem;   /* 17px */
  --text-body-md: 0.9375rem;   /* 15px */
  --text-body-sm: 0.8125rem;   /* 13px */
  --text-label: 0.6875rem;     /* 11px, uppercase + tracked */

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-body: 1.62;
  --leading-loose: 1.75;

  --tracking-display: -0.015em;
  --tracking-normal: 0;
  --tracking-label: 0.09em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure: 34rem;
}

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

  /* Shape — soft, seed-round. Never fully pill except badges and chips. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick: 2px;

  /* Elevation — green-tinted, low, like light through leaves. Never gray. */
  --shadow-xs: 0 1px 2px rgba(30, 42, 28, 0.06);
  --shadow-sm: 0 1px 2px rgba(30, 42, 28, 0.05), 0 2px 6px -2px rgba(30, 42, 28, 0.08);
  --shadow-md: 0 2px 4px rgba(30, 42, 28, 0.05), 0 8px 20px -6px rgba(30, 42, 28, 0.12);
  --shadow-lg: 0 4px 8px rgba(30, 42, 28, 0.06), 0 18px 40px -12px rgba(30, 42, 28, 0.16);
  --shadow-inset: inset 0 1px 3px rgba(30, 42, 28, 0.08);
  --shadow-focus: 0 0 0 3px rgba(92, 168, 96, 0.32);

  /* Motion — unhurried, like something growing. */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --page-max: 1180px;
  --page-gutter: 24px;
  --header-h: 68px;
}

/* ===== tokens/base.css ===== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-display-2); }
h2 { font-size: var(--text-display-3); }
h3 { font-size: var(--text-title); line-height: var(--leading-snug); }
h4 { font-size: var(--text-subtitle); line-height: var(--leading-snug); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration-color: var(--border-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }

small { font-size: var(--text-body-sm); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-8) 0; }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

::selection { background: var(--peony-2); color: var(--ink-1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== tokens/utilities.css ===== */
/* AddGardenLinks class layer — the Blade-facing API.
   React consumers use the components/ primitives; Blade templates use these classes.
   Class names mirror the component names one-for-one. */

/* Layout ------------------------------------------------------- */
.agl-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }
.agl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.agl-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.agl-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* Eyebrow / label --------------------------------------------- */
.agl-label {
  font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.agl-mono { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-muted); }

/* Button ------------------------------------------------------- */
.agl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-body-md); font-weight: var(--weight-semibold);
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--accent); color: var(--text-on-accent); cursor: pointer;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
  box-shadow: var(--shadow-xs);
}
.agl-btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--text-on-accent); }
.agl-btn:active { transform: translateY(1px); box-shadow: none; }
.agl-btn:disabled, .agl-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.agl-btn--secondary { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-strong); }
.agl-btn--secondary:hover { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent-hover); }
.agl-btn--bloom { background: var(--bloom); }
.agl-btn--bloom:hover { background: var(--peony-4); }
.agl-btn--ghost { background: transparent; color: var(--text-body); box-shadow: none; }
.agl-btn--ghost:hover { background: var(--surface-sunk); color: var(--text-heading); box-shadow: none; }
.agl-btn--sm { padding: 6px 12px; font-size: var(--text-body-sm); border-radius: var(--radius-xs); }
.agl-btn--lg { padding: 14px 26px; font-size: var(--text-body-lg); border-radius: var(--radius-md); }
.agl-btn--block { width: 100%; }

/* Card --------------------------------------------------------- */
.agl-card {
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
.agl-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.agl-card--sunk { background: var(--surface-sunk); box-shadow: var(--shadow-inset); border-color: var(--border-strong); }
.agl-card--bloom { border-color: var(--peony-2); background: var(--bloom-soft); box-shadow: none; }

/* Badge & tag -------------------------------------------------- */
.agl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold); padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--leaf-5);
}
.agl-badge--bloom { background: var(--bloom-soft); color: var(--peony-4); }
.agl-badge--sun { background: var(--sun-1); color: var(--sun-4); }
.agl-badge--lilac { background: var(--lilac-1); color: var(--lilac-4); }
.agl-badge--sky { background: var(--sky-1); color: var(--sky-4); }
.agl-badge--clay { background: var(--clay-1); color: var(--clay-4); }
.agl-badge--neutral { background: var(--surface-sunk); color: var(--text-muted); }

.agl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  color: var(--text-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-soft);
}
.agl-tag:hover { border-color: var(--border-accent); background: var(--accent-soft); color: var(--accent-hover); }
.agl-tag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }

/* Form --------------------------------------------------------- */
.agl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.agl-field__label { font-size: var(--text-body-md); font-weight: var(--weight-semibold); color: var(--text-heading); }
.agl-field__hint { font-size: var(--text-body-sm); color: var(--text-muted); }
.agl-field__error { font-size: var(--text-body-sm); color: var(--state-danger); font-weight: var(--weight-medium); }
.agl-input {
  font-family: var(--font-body); font-size: var(--text-body-md); color: var(--text-heading);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 14px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.agl-input::placeholder { color: var(--text-faint); }
.agl-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.agl-input--invalid { border-color: var(--state-danger); }
.agl-input--mono { font-family: var(--font-mono); }

/* Header ------------------------------------------------------- */
.agl-header {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper-1) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border-soft);
}

/* Divider ornament -------------------------------------------- */
.agl-rule { display: flex; align-items: center; gap: var(--space-4); color: var(--border-strong); }
.agl-rule::before, .agl-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }