/* ─────────────────────────────────────────────────────────────
   COLORS — Universität Freiburg Corporate Design (2023, Moniteurs)
   Hauptfarben (primary), Zusatzfarben (secondary), neutrals.
   Values sampled directly from the official CD specimen sheets.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ===== Hauptfarbe · Blau (the brand-defining blue) ===== */
  --ufr-blau:        #344a9a;   /* 100% — logo, headlines, primary UI   */
  --ufr-blau-80:     #5c68af;
  --ufr-blau-60:     #868ac3;
  --ufr-blau-40:     #aeb0d9;
  --ufr-blau-20:     #d6d7ed;

  /* ===== Dunkelblau (depth, large surfaces, dark mode) ===== */
  --ufr-dunkelblau:     #00004a;
  --ufr-dunkelblau-80:  color-mix(in srgb, var(--ufr-dunkelblau) 80%, #fff);
  --ufr-dunkelblau-60:  color-mix(in srgb, var(--ufr-dunkelblau) 60%, #fff);
  --ufr-dunkelblau-40:  color-mix(in srgb, var(--ufr-dunkelblau) 40%, #fff);
  --ufr-dunkelblau-20:  color-mix(in srgb, var(--ufr-dunkelblau) 20%, #fff);

  /* ===== Schwarz (a deep ink, not pure black) ===== */
  --ufr-schwarz:     #00131a;

  /* ===== Weiß ===== */
  --ufr-weiss:       #ffffff;

  /* ===== Sand (warm paper neutral — the "off-white" canvas) ===== */
  --ufr-sand:        #f6f1e3;
  --ufr-sand-50:     #fbf8f1;

  /* ===== Zusatzfarben · secondary accents (each w/ 80/60/40/20) ===== */
  --ufr-gruen:       #00a082;
  --ufr-gruen-80:    color-mix(in srgb, var(--ufr-gruen) 80%, #fff);
  --ufr-gruen-60:    color-mix(in srgb, var(--ufr-gruen) 60%, #fff);
  --ufr-gruen-40:    color-mix(in srgb, var(--ufr-gruen) 40%, #fff);
  --ufr-gruen-20:    color-mix(in srgb, var(--ufr-gruen) 20%, #fff);

  --ufr-braun:       #916b30;
  --ufr-braun-80:    color-mix(in srgb, var(--ufr-braun) 80%, #fff);
  --ufr-braun-60:    color-mix(in srgb, var(--ufr-braun) 60%, #fff);
  --ufr-braun-40:    color-mix(in srgb, var(--ufr-braun) 40%, #fff);
  --ufr-braun-20:    color-mix(in srgb, var(--ufr-braun) 20%, #fff);

  --ufr-gelb:        #ffe75e;
  --ufr-gelb-80:     color-mix(in srgb, var(--ufr-gelb) 80%, #fff);
  --ufr-gelb-60:     color-mix(in srgb, var(--ufr-gelb) 60%, #fff);
  --ufr-gelb-40:     color-mix(in srgb, var(--ufr-gelb) 40%, #fff);
  --ufr-gelb-20:     color-mix(in srgb, var(--ufr-gelb) 20%, #fff);

  --ufr-rosa:        #e7c3de;
  --ufr-rosa-80:     color-mix(in srgb, var(--ufr-rosa) 80%, #fff);
  --ufr-rosa-60:     color-mix(in srgb, var(--ufr-rosa) 60%, #fff);
  --ufr-rosa-40:     color-mix(in srgb, var(--ufr-rosa) 40%, #fff);
  --ufr-rosa-20:     color-mix(in srgb, var(--ufr-rosa) 20%, #fff);

  /* ===== Functional greys (derived from Schwarz, for UI chrome) ===== */
  --ufr-ink:         var(--ufr-schwarz);
  --ufr-grey-700:    #3a474c;
  --ufr-grey-500:    #6b757a;
  --ufr-grey-300:    #b7bdbf;
  --ufr-grey-200:    #d7dadb;
  --ufr-grey-100:    #eceeed;

  /* ─────────────────────────────────────────────────────────────
     SEMANTIC ALIASES — reference these in product UI, not raw hues
     ───────────────────────────────────────────────────────────── */
  --color-brand:           var(--ufr-blau);
  --color-brand-strong:    var(--ufr-dunkelblau);

  /* Surfaces */
  --surface-page:          var(--ufr-weiss);
  --surface-page-warm:     var(--ufr-sand);
  --surface-card:          var(--ufr-weiss);
  --surface-raised:        var(--ufr-sand-50);
  --surface-inverse:       var(--ufr-dunkelblau);
  --surface-brand:         var(--ufr-blau);

  /* Text */
  --text-strong:           var(--ufr-schwarz);
  --text-body:             #1c2a2f;
  --text-muted:            var(--ufr-grey-500);
  --text-on-brand:         var(--ufr-weiss);
  --text-on-dark:          var(--ufr-weiss);
  --text-link:             var(--ufr-blau);

  /* Lines & borders */
  --border-subtle:         var(--ufr-grey-200);
  --border-default:        var(--ufr-grey-300);
  --border-strong:         var(--ufr-schwarz);
  --border-brand:          var(--ufr-blau);

  /* Interaction (hover/press derive from blau) */
  --color-brand-hover:     #2c3f84;   /* blau, darkened */
  --color-brand-press:     #243370;

  /* Status — drawn from the secondary palette, on-brand */
  --color-success:         var(--ufr-gruen);
  --color-success-bg:      var(--ufr-gruen-20);
  --color-warning:         var(--ufr-gelb);
  --color-warning-bg:      var(--ufr-gelb-20);
  --color-info:            var(--ufr-blau);
  --color-info-bg:         var(--ufr-blau-20);
  --color-accent:          var(--ufr-rosa);
  --color-accent-bg:       var(--ufr-rosa-20);
  --color-earth:           var(--ufr-braun);
  --color-earth-bg:        var(--ufr-braun-20);

  /* Focus ring */
  --focus-ring:            var(--ufr-blau);
}