/* RRD Works — design tokens (groen, één tint lichter) */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  /* Core palette — groen */
  --rrd-green-deep: #104538;
  --rrd-green: #22755a;
  --rrd-green-mid: #2d9169;
  --rrd-green-light: #3aa876;
  --rrd-mint: #6dc9a4;
  --rrd-mint-bright: #9edfc0;
  --rrd-sage-soft: #d0e8dc;

  /* Surfaces */
  --rrd-page: #edf3f0;
  --rrd-surface: #ffffff;
  --rrd-surface-muted: #f6faf8;
  --rrd-border: #d0e2d8;
  --rrd-border-strong: #b5d4c4;

  /* Text */
  --rrd-text: #0f1f18;
  --rrd-text-muted: #4f6d60;
  --rrd-text-subtle: #758f82;

  /* Hero */
  --rrd-hero-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2000&q=80");
  --rrd-hero-overlay: linear-gradient(
    165deg,
    rgba(12, 48, 38, 0.68) 0%,
    rgba(16, 69, 56, 0.74) 45%,
    rgba(12, 42, 34, 0.88) 100%
  );

  /* Semantic aliases */
  --rrd-navy: var(--rrd-green-deep);
  --rrd-navy-mid: var(--rrd-green);
  --rrd-navy-light: var(--rrd-green-light);
  --rrd-sky: var(--rrd-mint);
  --rrd-sky-bright: var(--rrd-mint-bright);
  --rrd-sky-soft: var(--rrd-sage-soft);

  --rrd-accent: var(--rrd-green);
  --rrd-accent-hover: var(--rrd-green-light);
  --rrd-accent-soft: #eaf5ef;
  --rrd-badge-soon-bg: #f0f8f3;
  --rrd-badge-soon-text: #456b58;

  /* Layout */
  --rrd-radius-sm: 10px;
  --rrd-radius: 16px;
  --rrd-radius-lg: 24px;
  --rrd-shadow: 0 4px 6px rgba(16, 52, 40, 0.04), 0 12px 32px rgba(16, 52, 40, 0.07);
  --rrd-shadow-hover: 0 8px 16px rgba(16, 52, 40, 0.05), 0 20px 48px rgba(16, 52, 40, 0.1);
  --rrd-max-width: 880px;

  --rrd-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

}