/* ============================================================
   B-8 VERMIETUNG — COLOR TOKENS
   Palette extracted from the official logo (teal→blue gradient).
   Aqua  = primary brand teal (logo top  #10A59E)
   Marine = secondary brand blue (logo bottom #34ACCA)
   Stone = cool neutrals. White house/wordmark on the gradient.
   ============================================================ */

:root {
  /* ---- Base palette: Aqua / Teal (primary brand) ---- */
  --aqua-900: #063D39;
  --aqua-800: #075049;
  --aqua-700: #0A6E64; /* deep teal — brand text / strong */
  --aqua-600: #0C8579; /* primary action */
  --aqua-500: #14A89E; /* brand identity (logo top) */
  --aqua-400: #3DBDB3;
  --aqua-300: #74D2C9;
  --aqua-200: #ABE4DF;
  --aqua-100: #D7F2EF;
  --aqua-50:  #EDF9F7;

  /* ---- Base palette: Marine / Blue (secondary brand) ---- */
  --marine-900: #0C3A47;
  --marine-800: #114F60;
  --marine-700: #176F88;
  --marine-600: #1E8FAD;
  --marine-500: #34ACCA; /* logo bottom */
  --marine-400: #5DC1D9;
  --marine-300: #8DD5E6;
  --marine-200: #BCE7F1;
  --marine-100: #E0F4F9;
  --marine-50:  #EFFAFC;

  /* ---- Base palette: Stone (cool neutrals) ---- */
  --stone-950: #0F1517;
  --stone-900: #18201F;
  --stone-800: #2A3437;
  --stone-700: #3E4A4E;
  --stone-600: #586368;
  --stone-500: #76828A;
  --stone-400: #9BA6AA;
  --stone-300: #C3CCCE;
  --stone-200: #DDE4E5;
  --stone-150: #E6EBEC;
  --stone-100: #EEF2F2;
  --stone-50:  #F6F9F9;
  --white:     #FFFFFF;

  /* ---- Semantic: surfaces ---- */
  --surface-page:      var(--stone-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--stone-100);
  --surface-inverse:   var(--aqua-900);
  --surface-accent:    var(--aqua-600);
  --surface-accent-soft: var(--aqua-50);
  --surface-premium:   var(--marine-50);

  /* ---- Semantic: text ---- */
  --text-strong:   var(--stone-950);
  --text-body:     var(--stone-800);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-dark:  var(--stone-50);
  --text-on-dark-muted: var(--aqua-200);
  --text-on-accent: var(--white);
  --text-brand:    var(--aqua-700);
  --text-premium:  var(--aqua-700);

  /* ---- Semantic: borders & lines ---- */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--aqua-600);
  --hairline: rgba(15, 21, 23, 0.08);

  /* ---- Semantic: brand actions ---- */
  --brand:         var(--aqua-600);
  --brand-hover:   var(--aqua-700);
  --brand-active:  var(--aqua-800);
  --accent:        var(--marine-500);
  --accent-hover:  var(--marine-600);
  --accent-active: var(--marine-700);

  /* ---- Brand gradient (the logo) ---- */
  --brand-gradient:       linear-gradient(160deg, #14A89E 0%, #34ACCA 100%); /* @kind color */
  --brand-gradient-hover: linear-gradient(160deg, #0E948A 0%, #2496B4 100%); /* @kind color */

  /* ---- Status: Bonität / risk semantics ---- */
  --success-700: #1F6B4A;
  --success-500: #2E8B5F; /* Bonität: stark / Note 1-2 */
  --success-100: #DCEFE5;
  --warning-700: #9A6310;
  --warning-500: #C9821F; /* Bonität: mittel / Note 3 */
  --warning-100: #FBEDD3;
  --danger-700:  #8E2E2E;
  --danger-500:  #B23B3B;  /* Mietausfall-Risiko / Note 5-6 */
  --danger-100:  #F6DCDC;
  --info-500:    var(--marine-600);
  --info-100:    var(--marine-100);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(12, 133, 121, 0.30);
}