/* ============================================================
   Recht auf Vergessen — Design Tokens
   Colors & Typography foundations
   ============================================================ */

/* --- Web fonts ---------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand palette (extracted from Farbpalette.pdf)
     ============================================================ */

  /* Sunflower — the heart, the awareness ribbon, primary brand */
  --rv-sun-50:  #fff8e6;
  --rv-sun-100: #fdebbb;
  --rv-sun-200: #fcdc8a;
  --rv-sun-300: #fcc652;   /* PRIMARY — heart yellow */
  --rv-sun-400: #e8ad36;
  --rv-sun-500: #c8901f;
  --rv-sun-600: #8c6210;

  /* Hibiscus — warmth, care, accent */
  --rv-pink-50:  #ffe9f1;
  --rv-pink-100: #ffc4dc;
  --rv-pink-200: #ff9bc4;
  --rv-pink-300: #ff70a6;  /* PRIMARY accent */
  --rv-pink-400: #e85691;
  --rv-pink-500: #c33b76;

  /* Sky — hope, calm, secondary accent */
  --rv-sky-50:  #e8f8ff;
  --rv-sky-100: #c0ecff;
  --rv-sky-200: #95dfff;
  --rv-sky-300: #70d6ff;   /* PRIMARY accent */
  --rv-sky-400: #46b9e8;
  --rv-sky-500: #2a96c4;

  /* Ink — text, gravitas, dark surfaces */
  --rv-ink-50:  #f4f6f8;
  --rv-ink-100: #dfe4ea;
  --rv-ink-200: #b3bdc7;
  --rv-ink-300: #7d8a98;
  --rv-ink-400: #4a5867;
  --rv-ink-500: #283845;  /* slate navy */
  --rv-ink-600: #202c39;  /* deepest — primary text */
  --rv-ink-700: #161e28;

  /* Paper — backgrounds, surfaces */
  --rv-paper:        #fefcf6;   /* the logo cream — warm white */
  --rv-paper-tint:   #faf3e2;   /* whisper of yellow */
  --rv-paper-card:   #ffffff;
  --rv-paper-shadow: rgba(32, 44, 57, 0.08);

  /* ============================================================
     SEMANTIC color roles
     ============================================================ */
  --rv-fg:          var(--rv-ink-600);   /* primary text */
  --rv-fg-muted:    var(--rv-ink-400);   /* meta, captions */
  --rv-fg-subtle:   var(--rv-ink-300);   /* placeholders */
  --rv-fg-inverse:  var(--rv-paper);

  --rv-bg:          var(--rv-paper);
  --rv-bg-elev:     var(--rv-paper-card);
  --rv-bg-tint:     var(--rv-paper-tint);
  --rv-bg-dark:     var(--rv-ink-600);

  --rv-border:        rgba(32, 44, 57, 0.12);
  --rv-border-strong: rgba(32, 44, 57, 0.24);
  --rv-border-focus:  var(--rv-sun-300);

  --rv-brand:         var(--rv-sun-300);
  --rv-brand-hover:   var(--rv-sun-400);
  --rv-brand-press:   var(--rv-sun-500);
  --rv-brand-on:      var(--rv-ink-600);   /* text on yellow */

  --rv-accent-pink:   var(--rv-pink-300);
  --rv-accent-sky:    var(--rv-sky-300);

  --rv-success:       #2f9e6a;
  --rv-danger:        #d04a4a;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --rv-font-display: "Montserrat", system-ui, sans-serif;
  --rv-font-body:    "Montserrat", system-ui, sans-serif;
  --rv-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — base 16px */
  --rv-text-xs:   0.75rem;     /* 12 */
  --rv-text-sm:   0.875rem;    /* 14 */
  --rv-text-base: 1rem;        /* 16 */
  --rv-text-md:   1.125rem;    /* 18 */
  --rv-text-lg:   1.375rem;    /* 22 */
  --rv-text-xl:   1.75rem;     /* 28 */
  --rv-text-2xl:  2.25rem;     /* 36 */
  --rv-text-3xl:  3rem;        /* 48 */
  --rv-text-4xl:  4rem;        /* 64 */
  --rv-text-5xl:  5.5rem;      /* 88 */

  --rv-leading-tight:  1.05;
  --rv-leading-snug:   1.2;
  --rv-leading-normal: 1.5;
  --rv-leading-loose:  1.7;

  --rv-tracking-tight:  -0.02em;
  --rv-tracking-normal: 0;
  --rv-tracking-wide:   0.04em;
  --rv-tracking-caps:   0.12em;    /* for ALL CAPS labels */

  /* ============================================================
     SPACING — 4pt grid
     ============================================================ */
  --rv-space-1:  4px;
  --rv-space-2:  8px;
  --rv-space-3:  12px;
  --rv-space-4:  16px;
  --rv-space-5:  20px;
  --rv-space-6:  24px;
  --rv-space-8:  32px;
  --rv-space-10: 40px;
  --rv-space-12: 48px;
  --rv-space-16: 64px;
  --rv-space-20: 80px;
  --rv-space-24: 96px;

  /* ============================================================
     RADII — soft, generous, heart-like
     ============================================================ */
  --rv-radius-sm:   6px;
  --rv-radius-md:   12px;
  --rv-radius-lg:   20px;
  --rv-radius-xl:   28px;
  --rv-radius-2xl:  40px;
  --rv-radius-pill: 999px;

  /* ============================================================
     SHADOWS — warm, soft, low
     ============================================================ */
  --rv-shadow-xs: 0 1px 2px rgba(32, 44, 57, 0.06);
  --rv-shadow-sm: 0 2px 6px rgba(32, 44, 57, 0.06), 0 1px 2px rgba(32, 44, 57, 0.04);
  --rv-shadow-md: 0 6px 16px rgba(32, 44, 57, 0.08), 0 2px 4px rgba(32, 44, 57, 0.04);
  --rv-shadow-lg: 0 16px 40px rgba(32, 44, 57, 0.12), 0 4px 8px rgba(32, 44, 57, 0.04);
  --rv-shadow-glow-sun: 0 8px 28px rgba(252, 198, 82, 0.45);

  /* ============================================================
     MOTION
     ============================================================ */
  --rv-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --rv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rv-dur-fast:   140ms;
  --rv-dur-base:   220ms;
  --rv-dur-slow:   380ms;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--rv-bg);
  color: var(--rv-fg);
  font-family: var(--rv-font-body);
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY ELEMENTS
   ============================================================ */
.rv-display {
  font-family: var(--rv-font-display);
  font-weight: 900;
  font-size: var(--rv-text-5xl);
  line-height: var(--rv-leading-tight);
  letter-spacing: var(--rv-tracking-tight);
  text-transform: uppercase;
  color: var(--rv-fg);
}

.rv-h1 {
  font-family: var(--rv-font-display);
  font-weight: 900;
  font-size: var(--rv-text-4xl);
  line-height: var(--rv-leading-tight);
  letter-spacing: var(--rv-tracking-tight);
  text-transform: uppercase;
  color: var(--rv-fg);
  margin: 0;
}

.rv-h2 {
  font-family: var(--rv-font-display);
  font-weight: 900;
  font-size: var(--rv-text-3xl);
  line-height: var(--rv-leading-snug);
  letter-spacing: var(--rv-tracking-tight);
  text-transform: uppercase;
  color: var(--rv-fg);
  margin: 0;
}

.rv-h3 {
  font-family: var(--rv-font-body);
  font-weight: 800;
  font-size: var(--rv-text-2xl);
  line-height: var(--rv-leading-snug);
  letter-spacing: -0.01em;
  color: var(--rv-fg);
  margin: 0;
}

.rv-h4 {
  font-family: var(--rv-font-body);
  font-weight: 700;
  font-size: var(--rv-text-xl);
  line-height: var(--rv-leading-snug);
  color: var(--rv-fg);
  margin: 0;
}

.rv-lede {
  font-family: var(--rv-font-body);
  font-weight: 500;
  font-size: var(--rv-text-md);
  line-height: var(--rv-leading-normal);
  color: var(--rv-fg);
}

.rv-body {
  font-family: var(--rv-font-body);
  font-weight: 400;
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading-loose);
  color: var(--rv-fg);
  text-wrap: pretty;
}

.rv-meta {
  font-family: var(--rv-font-body);
  font-weight: 500;
  font-size: var(--rv-text-sm);
  color: var(--rv-fg-muted);
}

.rv-eyebrow {
  font-family: var(--rv-font-body);
  font-weight: 700;
  font-size: var(--rv-text-xs);
  letter-spacing: var(--rv-tracking-caps);
  text-transform: uppercase;
  color: var(--rv-fg-muted);
}

.rv-quote {
  font-family: var(--rv-font-body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--rv-text-lg);
  line-height: var(--rv-leading-snug);
  color: var(--rv-fg);
}