/*
 * Soily Design System — Tokens
 * Source: Brand_Guide_Soily.pdf (© 2025 sina grafik design)
 *
 * Brand: Soily Lebendige Böden
 * "We advise farmers and ambitious gardeners on building up
 *  the Soil Food Web. We also produce highest-quality compost
 *  for revitalising soils."
 */

/* ---------- Webfonts ----------
 * Local files (brand-issued):
 *   - Nunito-Bold (used in place of Nunito Black where unavailable)
 *   - Nunito-Regular
 *   - Inter-Regular
 *
 * Google Fonts pull-in: Nunito 900 (Black) for true display weight,
 * and Inter 700 (Bold) for in-body emphasis. Both are official Google
 * Fonts per the brand guide — see TODO at bottom for files to request
 * from the user if a fully offline build is required.
 */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Nunito-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Nunito-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/Nunito-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-Regular.ttf") format("truetype");
}
/* Inter Bold ships in 3 optical-size masters. We default 700 to the 18pt
 * cut (body / lead / chip text — the most common use). Headlines use
 * Nunito Black, so the 28pt cut is exposed under a separate family name
 * in case a heavy Inter display is needed for a specific artifact. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter_18pt-Bold.ttf") format("truetype");
}

:root {
  /* ---------- Brand colors (per Brand Guide p.7) ---------- */
  --soily-dark-green:  #4a5c4b;   /* Dunkelgrün — primary brand / backgrounds, body text on light */
  --soily-green:       #809b6e;   /* Hellgrün — accent, background, button fills */
  --soily-beige:       #f2e9d3;   /* Beige — paper / canvas background */
  --soily-red:         #cb4f41;   /* Rot — sparing accent, highlights, alerts */

  /* Tints (10/20/40/60% of dark-green over beige, generated harmonically) */
  --soily-dark-green-90: #5b6c5c;
  --soily-dark-green-70: #7c8a7d;
  --soily-dark-green-50: #a4ada3;
  --soily-dark-green-20: #d8dcd6;

  --soily-green-90:     #8da77d;
  --soily-green-70:     #aabea0;
  --soily-green-30:     #dde4d4;
  --soily-green-10:     #f0f3ea;

  --soily-beige-deep:   #e8dcbf;   /* slightly deeper beige for cards on beige ground */
  --soily-beige-soft:   #f8f2e3;
  --soily-paper:        #fbf7ec;   /* near-white warm canvas */

  --soily-red-soft:     #de7e72;
  --soily-red-tint:     #f4d6d1;

  /* ---------- Semantic surfaces ---------- */
  --bg:          var(--soily-beige);
  --bg-soft:     var(--soily-beige-soft);
  --bg-paper:    var(--soily-paper);
  --bg-inverse:  var(--soily-dark-green);

  --fg:          var(--soily-dark-green);          /* default text on beige */
  --fg-muted:    var(--soily-dark-green-70);
  --fg-subtle:   var(--soily-dark-green-50);
  --fg-inverse:  var(--soily-beige);                /* text on dark-green */
  --fg-inverse-muted: rgba(242,233,211,0.72);

  --accent:      var(--soily-green);
  --accent-strong: var(--soily-dark-green);
  --highlight:   var(--soily-red);

  --success:     var(--soily-green);
  --warning:     #c9a14a;                            /* not in brand — derived for status */
  --danger:      var(--soily-red);

  --border:           rgba(74, 92, 75, 0.16);
  --border-strong:    rgba(74, 92, 75, 0.32);
  --border-on-dark:   rgba(242, 233, 211, 0.18);

  /* ---------- Type families ---------- */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter",  system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display uses Nunito 900 (Black) where available, else 700 (Bold). */
  --weight-display: 900;
  --weight-bold:    700;
  --weight-regular: 400;

  /* ---------- Type scale (1.250 — major third — friendly, organic) ---------- */
  --fs-12: 0.75rem;   /* 12 — micro / captions */
  --fs-14: 0.875rem;  /* 14 — small body */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — large body / lead */
  --fs-22: 1.375rem;  /* 22 — h5 */
  --fs-28: 1.75rem;   /* 28 — h4 */
  --fs-34: 2.125rem;  /* 34 — h3 */
  --fs-44: 2.75rem;   /* 44 — h2 */
  --fs-56: 3.5rem;    /* 56 — h1 */
  --fs-72: 4.5rem;    /* 72 — display */
  --fs-96: 6rem;      /* 96 — hero display */

  --lh-tight:  1.08;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --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;
  --space-32: 128px;

  /* ---------- Radii ----------
   * Soily's primary form-language is the perfect circle. Rounding is
   * either small (cards, inputs) or full (pills, photo masks).
   */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---------- Shadows ----------
   * Earth-toned, low-contrast. Cast in dark-green rather than pure black
   * so cards feel rooted to the page, not floating.
   */
  --shadow-sm:  0 1px 2px rgba(74, 92, 75, 0.08);
  --shadow-md:  0 4px 14px rgba(74, 92, 75, 0.10), 0 1px 2px rgba(74, 92, 75, 0.06);
  --shadow-lg:  0 16px 36px rgba(74, 92, 75, 0.14), 0 2px 6px rgba(74, 92, 75, 0.08);
  --shadow-photo: 0 18px 48px rgba(74, 92, 75, 0.22);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1320px;
}

/* ============================================================
 * Element defaults
 * ============================================================ */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0 0 0.4em;
}
.display,
.display--hero { font-size: var(--fs-96); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h1 { font-size: var(--fs-72); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-56); }
h3 { font-size: var(--fs-44); }
h4 { font-size: var(--fs-34); }
h5 { font-size: var(--fs-28); }
h6 { font-size: var(--fs-22); }

p, .body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.lead { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.small { font-size: var(--fs-14); }
.micro {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-bold);
}

strong, b { font-weight: var(--weight-bold); }
em, i { font-style: italic; }

a {
  color: var(--soily-dark-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--soily-red); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--space-8) 0;
}

::selection { background: var(--soily-red); color: var(--soily-beige); }