/* =========================================================
   Arber Horticulture — Design Tokens
   Colors, typography, spacing, elevation.
   Import this file in any Arber surface.
   ========================================================= */

/* ---------- Fonts ---------- */
/*
  Arber's print materials use a friendly rounded sans for the "arber" wordmark,
  a bold condensed sans for product wordmarks ("leader", "Nathuro"), and a
  clean humanist sans for body copy in catalogs.

  Substitutions used here (Google Fonts — replace with licensed originals if available):
  - Display / wordmark-adjacent  →  Fraunces? No — we use Mulish (friendly rounded sans, matches the "arber" wordmark softness)
  - Headline / catalog titles    →  Barlow Condensed (stands in for the bold condensed titling used on packaging)
  - Body / UI                     →  Mulish (humanist, low x-height, works for both catalog body + web UI)
  - Monospace (codes / SKUs)      →  JetBrains Mono
*/
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ====================================================
     COLORS — Primary brand
     Drawn directly from the Arber logo: warm soil brown +
     leaf green. These are the anchors of every surface.
     ==================================================== */
  --arber-brown-900: #3C2414;   /* deepest soil, near-black for text on cream */
  --arber-brown-800: #4F3220;
  --arber-brown-700: #6B4A2C;   /* primary brand brown — the "A" in the logo */
  --arber-brown-600: #8A6742;
  --arber-brown-500: #A8855F;
  --arber-brown-400: #C4A781;
  --arber-brown-300: #DEC7A5;
  --arber-brown-200: #EADBBF;
  --arber-brown-100: #F3E8D3;
  --arber-brown-50:  #FAF4E6;   /* cream paper background */

  --arber-green-900: #1A3D1F;
  --arber-green-800: #22582C;
  --arber-green-700: #2E8540;   /* primary brand green — the leaf */
  --arber-green-600: #3DA352;
  --arber-green-500: #5DBC6E;
  --arber-green-400: #86D091;
  --arber-green-300: #B0E0B7;
  --arber-green-200: #D3ECD6;
  --arber-green-100: #E8F5EA;
  --arber-green-50:  #F3FAF4;

  /* ====================================================
     COLORS — Sub-brand accents
     Each Arber hobby line has a distinct color identity.
     ==================================================== */
  --leader-green:      #1E7A3A;   /* heritage Leader brand — deeper than brand green */
  --leader-bio-green:  #2E9D4F;   /* Leader BIO — brighter, organic */
  --nathuro-green:     #0F5B4A;   /* Nathuro — deep forest/teal; "peat-free, modern" */
  --nathuro-accent:    #7FB8A4;   /* Nathuro support — muted sage */

  /* ====================================================
     COLORS — Semantic neutrals (paper/ink system)
     Arber reads as printed-on-paper, not cold UI.
     "Ink" = text colors, "Paper" = background colors.
     ==================================================== */
  --ink-1:    var(--arber-brown-900);   /* primary text */
  --ink-2:    var(--arber-brown-800);   /* secondary text */
  --ink-3:    #6B5A47;                  /* tertiary / muted */
  --ink-4:    #9A8B79;                  /* hint / placeholder */
  --ink-inverse: #FFFFFF;

  --paper-1:  #FFFFFF;                  /* pure white — product photos, cards */
  --paper-2:  var(--arber-brown-50);    /* cream — default background */
  --paper-3:  #F5EEDC;                  /* darker cream — zebra rows, section dividers */
  --paper-4:  var(--arber-brown-100);   /* deepest cream, still warm */

  --line-1:   rgba(60, 36, 20, 0.08);   /* hairline */
  --line-2:   rgba(60, 36, 20, 0.16);   /* default border */
  --line-3:   rgba(60, 36, 20, 0.28);   /* emphasis border */

  /* ====================================================
     COLORS — Functional / UI states
     ==================================================== */
  --success: var(--arber-green-700);
  --info:    #3B7FB8;
  --warning: #D89020;
  --danger:  #B44040;

  /* Tag / category colors used for substrate/product taxonomy */
  --tag-professional: #1E4E7A;   /* professional line */
  --tag-hobby:        #2E8540;   /* hobby line */
  --tag-bio:          #A8D442;   /* organic/bio */
  --tag-mulch:        #8A6742;
  --tag-seed:         #D89020;

  /* ====================================================
     TYPOGRAPHY — Families
     ==================================================== */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-sans:     'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ====================================================
     TYPOGRAPHY — Scale (1.2 ratio, anchored to 16px)
     ==================================================== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  /* Line heights */
  --lh-tight:    1.05;  /* @kind other */
  --lh-snug:     1.2;   /* @kind other */
  --lh-normal:   1.5;   /* @kind other */
  --lh-relaxed:  1.65;  /* @kind other */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* for ALL-CAPS eyebrows */

  /* ====================================================
     SPACING — 4px base grid
     ==================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ====================================================
     RADIUS — Arber uses very soft, generous radii
     (echoes the rounded "arber" wordmark). No sharp corners.
     ==================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ====================================================
     ELEVATION — Soft, warm shadows (paper-on-paper).
     Avoid cool/blue-tinted shadows.
     ==================================================== */
  --shadow-xs: 0 1px 2px rgba(60, 36, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(60, 36, 20, 0.08);
  --shadow-md: 0 6px 18px rgba(60, 36, 20, 0.10);
  --shadow-lg: 0 18px 40px rgba(60, 36, 20, 0.14);
  --shadow-xl: 0 32px 72px rgba(60, 36, 20, 0.18);

  /* Inner hairline for pill buttons + inputs */
  --shadow-inset: inset 0 0 0 1px var(--line-2);

  /* ====================================================
     MOTION
     ==================================================== */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);    /* @kind other */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --duration-fast:    150ms;   /* @kind other */
  --duration-normal:  250ms;   /* @kind other */
  --duration-slow:    400ms;   /* @kind other */
}

/* =========================================================
   Semantic element styles
   Use these classes on real content.
   ========================================================= */

.arber-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--ink-1);
  background: var(--paper-2);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.arber-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  color: var(--ink-1);
  text-wrap: balance;
}

.arber-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--ink-1);
  text-wrap: balance;
}

.arber-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--ink-1);
  text-wrap: balance;
}

.arber-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--ink-1);
}

.arber-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--arber-green-700);
}

.arber-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  text-wrap: pretty;
}

.arber-p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-1);
  text-wrap: pretty;
}

.arber-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

.arber-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--ink-2);
}

/* Product-name wordmark style (use for "leader", "Nathuro" etc) */
.arber-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
}