/* ============================================================
   Rediscov — Foundations
   Tokens for color + typography. Import once and inherit.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap");

:root {
  /* -------- Brand palette -------- */
  --rd-green-deep:    #0B7C64;   /* Verde profondo */
  --rd-green-bright:  #15EBBC;   /* Verde brillante */

  /* -------- Neutrals -------- */
  --rd-black:         #1D1D1B;   /* Nero assoluto */
  --rd-gray-dark:     #3C3C3B;   /* Grigio scuro */
  --rd-gray-mid:      #9D9D9C;   /* Grigio medio */
  --rd-gray-light:    #D9D9D8;   /* Derived – hairlines, dividers on light */
  --rd-off-white:     #F4F4F2;   /* Derived – warm paper background */
  --rd-white:         #FFFFFF;

  /* -------- Gradients -------- */
  --rd-gradient-brand: linear-gradient(135deg, #15EBBC 0%, #0B7C64 100%);
  --rd-gradient-neutral: linear-gradient(180deg, #3C3C3B 0%, #1D1D1B 100%);
  --rd-gradient-atmos:  radial-gradient(120% 80% at 20% 0%, rgba(21,235,188,0.18) 0%, rgba(11,124,100,0.0) 55%), #1D1D1B;

  /* -------- Semantic – light surface -------- */
  --rd-bg:            var(--rd-white);
  --rd-bg-muted:      var(--rd-off-white);
  --rd-fg:            var(--rd-black);
  --rd-fg-muted:      var(--rd-gray-dark);
  --rd-fg-subtle:     var(--rd-gray-mid);
  --rd-border:        var(--rd-gray-light);
  --rd-accent:        var(--rd-green-deep);
  --rd-accent-hi:     var(--rd-green-bright);
  --rd-on-accent:     var(--rd-white);

  /* -------- Type families -------- */
  --rd-font-display:  "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rd-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -------- Type scale (1.250 / Major Third) -------- */
  --rd-text-12: 12px;
  --rd-text-14: 14px;
  --rd-text-16: 16px;
  --rd-text-18: 18px;
  --rd-text-20: 20px;
  --rd-text-24: 24px;
  --rd-text-32: 32px;
  --rd-text-40: 40px;
  --rd-text-56: 56px;
  --rd-text-72: 72px;

  /* -------- Weight -------- */
  --rd-w-light:   300;
  --rd-w-regular: 400;
  --rd-w-medium:  500;
  --rd-w-bold:    700;

  /* -------- Spacing (4px base) -------- */
  --rd-space-1: 4px;
  --rd-space-2: 8px;
  --rd-space-3: 12px;
  --rd-space-4: 16px;
  --rd-space-5: 24px;
  --rd-space-6: 32px;
  --rd-space-7: 48px;
  --rd-space-8: 64px;
  --rd-space-9: 96px;

  /* -------- Radius -------- */
  --rd-radius-0:   0px;
  --rd-radius-sm:  4px;
  --rd-radius-md:  8px;
  --rd-radius-lg:  16px;
  --rd-radius-pill: 999px;

  /* -------- Shadow -------- */
  --rd-shadow-sm: 0 1px 2px rgba(29,29,27,0.06), 0 1px 1px rgba(29,29,27,0.04);
  --rd-shadow-md: 0 6px 16px -4px rgba(29,29,27,0.10), 0 2px 4px rgba(29,29,27,0.04);
  --rd-shadow-lg: 0 20px 40px -12px rgba(29,29,27,0.18), 0 4px 8px rgba(29,29,27,0.05);
  --rd-glow-green: 0 0 0 4px rgba(21,235,188,0.18);

  /* -------- Motion -------- */
  --rd-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);   /* easeOutQuint-ish */
  --rd-ease-in:    cubic-bezier(0.55, 0.05, 0.68, 0.19);
  --rd-dur-fast:   140ms;
  --rd-dur-base:   220ms;
  --rd-dur-slow:   420ms;

  /* -------- Signature angle (logotype S) -------- */
  --rd-tilt: 5.55deg;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

.rd-h1, .rd-h2, .rd-h3, .rd-h4, .rd-eyebrow, .rd-label {
  font-family: var(--rd-font-display);
  color: var(--rd-fg);
  margin: 0;
  text-wrap: balance;
}

.rd-h1 {
  font-weight: var(--rd-w-bold);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.rd-h2 {
  font-weight: var(--rd-w-bold);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.rd-h3 {
  font-weight: var(--rd-w-bold);
  font-size: var(--rd-text-32);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.rd-h4 {
  font-weight: var(--rd-w-medium);
  font-size: var(--rd-text-24);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.rd-eyebrow {
  font-weight: var(--rd-w-medium);
  font-size: var(--rd-text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-fg-muted);
}
.rd-label {
  font-weight: var(--rd-w-medium);
  font-size: var(--rd-text-14);
  letter-spacing: 0.02em;
  color: var(--rd-fg-muted);
}

.rd-body, .rd-p, .rd-caption {
  font-family: var(--rd-font-body);
  font-weight: var(--rd-w-light);
  color: var(--rd-fg);
  margin: 0;
  text-wrap: pretty;
}
.rd-body, .rd-p {
  font-size: var(--rd-text-18);
  line-height: 1.55;
}
.rd-caption {
  font-size: var(--rd-text-14);
  line-height: 1.5;
  color: var(--rd-fg-muted);
}

/* Convenience: a 5.55° forward slash, mirroring the logotype S */
.rd-tilt-s { display: inline-block; transform: skewX(calc(-1 * var(--rd-tilt))); }