/* JFH Horticultural Supplies — design tokens (from the design system).
   Literals verified against the handoff README. Used by both admin and phone. */

/* Self-hosted fonts (latin) so the app works fully offline — no CDN dependency. */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/nunito-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/nunito-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/nunito-sans-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/nunito-sans-900.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* Brand palette */
  --mountain-green: #154734;
  --fern-green: #71b07b;
  --cactus: #527758;
  --pistachio: #ccebc2;
  --sea-shell: #ededed;

  --green-200: #d8ecd6;
  --green-300: #a9d69f;
  --green-950: #0c2c20;
  --neutral-0: #ffffff;
  --neutral-100: #f6f7f4;
  --neutral-300: #d1d1cf;
  --neutral-600: #5d5d59;

  /* Semantic — earthy, desaturated; status only, never promotion.
     Values pixel-sampled from the design-system screenshots. */
  --success-500: #4b8f5e;
  --warning-500: #c08a1e;
  --danger-500: #a4392c;
  --info-500: #3f6d8a;
  --disabled-brand: #95aca3;

  /* Surfaces */
  --surface-brand: var(--mountain-green);
  --surface-card: #ffffff;
  --surface-page: #ffffff;
  --surface-muted: #ededed;
  --surface-brand-tint: #f4faf1;
  --surface-accent: var(--fern-green);
  --surface-danger-tint: #f8e4e0;
  --surface-warning-tint: #fbf0d6;
  --surface-success-tint: #e2f2e6;

  /* Text */
  --text-heading: #154734;
  --text-body: #2c2c29;
  --text-secondary: #5d5d59;
  --text-muted: #8b8b8b;
  --text-brand: #154734;
  --text-brand-accent: #527758;
  --text-on-brand: #ffffff;
  --link: #2f6d55;
  --link-hover: #154734;

  /* Borders */
  --border-subtle: #e2e2e0;
  --border-strong: #d1d1cf;
  --border-accent: var(--fern-green);

  /* Radii */
  --radius-badge: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Elevation — tinted with Mountain Green, never neutral black */
  --shadow-xs: 0 1px 2px rgba(12, 44, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(12, 44, 32, 0.08);
  --shadow-lg: 0 16px 40px rgba(12, 44, 32, 0.16);
  --shadow-focus: 0 0 0 3px rgba(113, 176, 123, 0.5);

  /* Typography */
  --font-body: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  --type-h1: 800 32px/1.15 var(--font-body);
  --type-h2: 800 30px/1.15 var(--font-body);
  --type-h3: 800 18px/1.3 var(--font-body);
  --type-h4: 700 16px/1.35 var(--font-body);
  --type-body: 400 15px/1.62 var(--font-body);
  --type-small: 400 13px/1.5 var(--font-body);
  --type-eyebrow: 700 11px/1.2 var(--font-body);
  --type-mono: 500 12px/1.4 var(--font-mono);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-control: 140ms;
  --dur-panel: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-control: 0ms; --dur-panel: 0ms; }
}