/* =========================================================
   frutra Design System — Colors & Typography
   B2B trading platform for fruit-juice industry raw materials
   ========================================================= */

/* ---------- Webfonts (lokal gehostet — DSGVO, kein Google-Fonts-Request) ---------- */
@import url('fonts.css');

:root {
  /* =========================================================
     COLOR — BRAND
     ========================================================= */

  /* Primary navy — taken directly from logo wordmark */
  --frutra-navy-900: #0f2338;
  --frutra-navy-800: #142b48;
  --frutra-navy-700: #1a365d;   /* logo color */
  --frutra-navy-600: #244a7a;
  --frutra-navy-500: #3a6396;
  --frutra-navy-400: #6b8ab2;
  --frutra-navy-300: #a3b8d0;
  --frutra-navy-200: #d1dbe7;
  --frutra-navy-100: #e8eef5;
  --frutra-navy-50:  #f4f7fb;

  /* Orchard green — taken from logo accent stripe */
  --frutra-green-900: #0e3d22;
  --frutra-green-800: #14552e;
  --frutra-green-700: #1d6a3a;  /* logo accent */
  --frutra-green-600: #2a8a4f;
  --frutra-green-500: #3da866;
  --frutra-green-400: #6cc28a;
  --frutra-green-300: #a3dabd;
  --frutra-green-200: #d0ecdb;
  --frutra-green-100: #e8f5ee;
  --frutra-green-50:  #f3faf6;

  /* Harvest accents — fruit-sourced support palette */
  --frutra-amber-700: #92590e;   /* apple-juice amber */
  --frutra-amber-500: #d6900f;
  --frutra-amber-300: #f0c878;
  --frutra-amber-100: #fbecc7;
  --frutra-amber-50:  #fdf6e4;

  --frutra-berry-700: #8a1d3f;   /* berry / grape concentrate */
  --frutra-berry-500: #c43764;
  --frutra-berry-100: #f8d8e1;

  /* =========================================================
     COLOR — NEUTRALS (warm-cool blend, leans cool)
     ========================================================= */
  --frutra-ink-900: #0c1620;     /* highest-contrast text */
  --frutra-ink-800: #1c2733;
  --frutra-ink-700: #2f3b48;
  --frutra-ink-600: #4a5666;
  --frutra-ink-500: #6c7787;
  --frutra-ink-400: #9098a6;
  --frutra-ink-300: #b9bfca;
  --frutra-ink-200: #dbdfe6;
  --frutra-ink-100: #ecedf1;
  --frutra-ink-50:  #f6f7f9;
  --frutra-white:   #ffffff;
  --frutra-paper:   #fbfbfa;     /* slightly warm page bg */

  /* =========================================================
     COLOR — SEMANTIC (status / data)
     ========================================================= */
  --frutra-success: #2a8a4f;     /* aligns with brand green */
  --frutra-success-bg: #e8f5ee;
  --frutra-warning: #d6900f;
  --frutra-warning-bg: #fdf6e4;
  --frutra-danger:  #c4322f;
  --frutra-danger-bg: #fbe8e7;
  --frutra-info:    #244a7a;
  --frutra-info-bg: #e8eef5;

  /* Trade-data semantics */
  --frutra-bid:    #2a8a4f;      /* buyer / Gesuch */
  --frutra-ask:    #c4322f;      /* seller / Angebot — German trading convention */
  --frutra-neutral:#6c7787;

  /* =========================================================
     SEMANTIC ROLES
     ========================================================= */
  --bg:           var(--frutra-paper);
  --bg-elevated:  var(--frutra-white);
  --bg-sunken:    var(--frutra-ink-50);
  --bg-brand:     var(--frutra-navy-700);
  --bg-brand-soft:var(--frutra-navy-50);

  --fg:           var(--frutra-ink-900);
  --fg-muted:     var(--frutra-ink-600);
  --fg-subtle:    var(--frutra-ink-500);
  --fg-disabled:  var(--frutra-ink-400);
  --fg-on-brand:  var(--frutra-white);
  --fg-link:      var(--frutra-navy-700);

  --border:        var(--frutra-ink-200);
  --border-strong: var(--frutra-ink-300);
  --border-brand:  var(--frutra-navy-700);
  --border-focus:  var(--frutra-navy-500);

  /* =========================================================
     TYPOGRAPHY — FAMILIES
     ========================================================= */
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;
  --font-mono:    'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; /* vereinheitlicht auf Roboto */
  --font-display: 'Roboto', -apple-system, 'Segoe UI', sans-serif; /* marketing display */

  /* =========================================================
     TYPOGRAPHY — SCALE
     ========================================================= */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  80px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* =========================================================
     SPACING (4px base grid)
     ========================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — restrained; trade platforms feel solid not floaty
     ========================================================= */
  --shadow-xs: 0 1px 0 rgba(15, 35, 56, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 35, 56, 0.06), 0 1px 0 rgba(15, 35, 56, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(15, 35, 56, 0.08), 0 2px 4px rgba(15, 35, 56, 0.04);
  --shadow-lg: 0 12px 28px -8px rgba(15, 35, 56, 0.14), 0 4px 8px rgba(15, 35, 56, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(15, 35, 56, 0.04);

  --focus-ring: 0 0 0 3px rgba(36, 74, 122, 0.28);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

.fr-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fr-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fr-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fr-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

.fr-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

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

.fr-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg);
}

.fr-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.fr-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.fr-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: 0.01em;
}

.fr-mono,
.fr-tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.fr-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-style: italic;
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: var(--fg);
}

.fr-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: var(--frutra-navy-300);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-base) var(--ease-standard);
}
.fr-link:hover { text-decoration-color: var(--frutra-navy-700); }