/* ============================================================================
   MeinMarkt365 – Design Tokens  v1.0
   Alle Werte als CSS Custom Properties. Einzige Quelle der Wahrheit.
   ========================================================================= */

:root {

  /* --- 1. FARBEN: Primär „Marktblau" ------------------------------------ */
  --mm-primary-50:  #F2F8FF;
  --mm-primary-100: #E2F0FF;
  --mm-primary-200: #C3E1FF;
  --mm-primary-300: #98CCFF;
  --mm-primary-400: #60B3FE;
  --mm-primary-500: #3399ED;
  --mm-primary-600: #0080D3;
  --mm-primary-700: #0069AF;   /* Markenkernfarbe */
  --mm-primary-800: #00548E;
  --mm-primary-900: #004170;
  --mm-primary-950: #032A49;

  /* --- Neutral „Graphit" (kühl, minimal blaustichig) --------------------- */
  --mm-neutral-0:   #FFFFFF;
  --mm-neutral-50:  #F5F8FA;
  --mm-neutral-100: #EBEFF2;
  --mm-neutral-200: #D9DEE3;
  --mm-neutral-300: #C1C7CE;
  --mm-neutral-400: #A6ADB4;
  --mm-neutral-500: #8D959C;
  --mm-neutral-600: #757D84;
  --mm-neutral-700: #60666D;
  --mm-neutral-800: #4D5258;
  --mm-neutral-900: #3B4045;
  --mm-neutral-950: #24292E;

  /* --- Akzent „Gold 365" (sparsam, max. 1 Fläche pro Ansicht) ------------ */
  --mm-accent-50:  #FEF7E7;
  --mm-accent-100: #FDEDCC;
  --mm-accent-200: #FAD998;
  --mm-accent-300: #F1BE4E;
  --mm-accent-400: #DAA200;
  --mm-accent-500: #BB8B00;
  --mm-accent-600: #9D7400;
  --mm-accent-700: #815F00;
  --mm-accent-800: #694C00;
  --mm-accent-900: #523B00;

  /* --- Semantik --------------------------------------------------------- */
  --mm-success-50:  #F1FBF2;  --mm-success-100: #E0F5E3; --mm-success-200: #C0EAC7;
  --mm-success-500: #41AC60;  --mm-success-600: #179446; --mm-success-700: #007B36;
  --mm-success-800: #03632B;

  --mm-warning-50:  #FFF6ED;  --mm-warning-100: #FFEAD8; --mm-warning-200: #FFD4AE;
  --mm-warning-500: #D27C00;  --mm-warning-600: #B16800; --mm-warning-700: #925500;
  --mm-warning-800: #764400;

  --mm-danger-50:   #FFF5F4;  --mm-danger-100:  #FFE9E6; --mm-danger-200:  #FFD1CC;
  --mm-danger-500:  #FA4D4D;  --mm-danger-600:  #E02631; --mm-danger-700:  #BD1122;
  --mm-danger-800:  #99101B;

  --mm-info-50:     #EFF9FF;  --mm-info-100:    #DBF3FF; --mm-info-200:    #B4E6FF;
  --mm-info-600:    #0087B3;  --mm-info-700:    #006F94; --mm-info-800:    #005A78;

  /* --- Sparten-Akzente: 9 Märkte (nur Tint-Flächen, Badges, Icon-Kacheln) ------ */
  --mm-immo-50:    #F2F8FF;  --mm-immo-100:   #E2F0FF;  --mm-immo-200:   #C3E1FF;  --mm-immo-400:   #60B3FE;  --mm-immo-600:   #0080D3;  --mm-immo-700:   #0069AF;
  --mm-wohnen-50:    #ECFBFD;  --mm-wohnen-100:   #D6F5FA;  --mm-wohnen-200:   #ACEAF4;  --mm-wohnen-400:   #00C2D6;  --mm-wohnen-600:   #008C9B;  --mm-wohnen-700:   #007380;
  --mm-auto-50:    #F7F6FF;  --mm-auto-100:   #EDECFF;  --mm-auto-200:   #DBD9FF;  --mm-auto-400:   #A99DFD;  --mm-auto-600:   #7967D4;  --mm-auto-700:   #6453B3;
  --mm-handwerk-50:    #FFF5F2;  --mm-handwerk-100:   #FFE9E2;  --mm-handwerk-200:   #FFD2C2;  --mm-handwerk-400:   #FC875D;  --mm-handwerk-600:   #D04904;  --mm-handwerk-700:   #AC3A00;
  --mm-sonstiges-50:    #FEF4FD;  --mm-sonstiges-100:   #FCE7FA;  --mm-sonstiges-200:   #F6CEF4;  --mm-sonstiges-400:   #DA8CD8;  --mm-sonstiges-600:   #AD53AB;  --mm-sonstiges-700:   #90418F;
  --mm-finanz-50:    #FEF7E7;  --mm-finanz-100:   #FCEDCC;  --mm-finanz-200:   #F6DB98;  --mm-finanz-400:   #D4A500;  --mm-finanz-600:   #997600;  --mm-finanz-700:   #7E6100;
  --mm-versich-50:    #EEFBF5;  --mm-versich-100:   #DAF6EA;  --mm-versich-200:   #B5ECD5;  --mm-versich-400:   #42C69D;  --mm-versich-600:   #00926E;  --mm-versich-700:   #00785A;
  --mm-energie-50:    #F4FAEE;  --mm-energie-100:   #E8F3DB;  --mm-energie-200:   #D1E6B7;  --mm-energie-400:   #93BC5A;  --mm-energie-600:   #618C00;  --mm-energie-700:   #4F7300;
  --mm-restnd-50:    #FEF4F8;  --mm-restnd-100:   #FDE8EF;  --mm-restnd-200:   #F8D1DF;  --mm-restnd-400:   #DC93AF;  --mm-restnd-600:   #AF5E7F;  --mm-restnd-700:   #924B68;

  /* --- 2. SEMANTISCHE ROLLEN (nur diese in Komponenten benutzen!) -------- */
  --mm-bg:              #FFFFFF;   /* Seitengrund */
  --mm-surface:         #FFFFFF;   /* Karten, Felder, Buttons — nie #fff direkt schreiben */
  --mm-surface-2:       var(--mm-neutral-50);
  --mm-bg-subtle:       var(--mm-neutral-50);
  --mm-bg-muted:        var(--mm-neutral-100);
  --mm-bg-inverse:      var(--mm-primary-950);
  --mm-overlay:         rgba(3, 42, 73, .45);

  --mm-text:            var(--mm-neutral-950);   /* 14,7:1 auf Weiß */
  --mm-text-secondary:  var(--mm-neutral-800);   /*  7,9:1 */
  --mm-text-muted:      var(--mm-neutral-700);   /*  5,8:1 – Minimum für Fließtext */
  --mm-text-on-primary: #FFFFFF;
  --mm-text-link:       var(--mm-primary-800);

  --mm-border:          var(--mm-neutral-200);
  --mm-border-strong:   var(--mm-neutral-500);   /* 3,04:1 auf Weiß — WCAG 1.4.11 */
  --mm-border-focus:    var(--mm-primary-600);

  --mm-action:          var(--mm-primary-700);
  --mm-action-hover:    var(--mm-primary-800);
  --mm-action-active:   var(--mm-primary-900);
  --mm-action-subtle:   var(--mm-primary-50);
  --mm-action-text:     var(--mm-primary-800);   /* Text von Sekundär, Tertiär, Link */
  --mm-action-border:   #4A9AD8;                 /* 3,04:1 — Rand von Outline-Buttons */

  /* --- 3. TYPOGRAFIE ---------------------------------------------------- */
  --mm-font-display: "Poppins", "Poppins Medium", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-text:    "Source Sans 3", "Source Sans Pro", "Noto Sans CJK JP", "Noto Sans",
                     system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-mono:    "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;

  --mm-fs-display-1: 3.00rem;  /* 48 px */
  --mm-fs-display-2: 2.25rem;  /* 36 px */
  --mm-fs-h1:        1.875rem; /* 30 px */
  --mm-fs-h2:        1.5rem;   /* 24 px */
  --mm-fs-h3:        1.25rem;  /* 20 px */
  --mm-fs-h4:        1.0625rem;/* 17 px */
  --mm-fs-body-lg:   1.125rem; /* 18 px */
  --mm-fs-body:      1rem;     /* 16 px – Basis */
  --mm-fs-body-sm:   0.875rem; /* 14 px */
  --mm-fs-caption:   0.8125rem;/* 13 px */
  --mm-fs-micro:     0.75rem;  /* 12 px – absolutes Minimum */

  --mm-lh-tight: 1.15;
  --mm-lh-snug:  1.3;
  --mm-lh-base:  1.55;
  --mm-lh-relax: 1.7;

  --mm-ls-display: -0.02em;
  --mm-ls-heading: -0.01em;
  --mm-ls-body:     0em;
  --mm-ls-label:    0.005em;
  --mm-ls-caps:     0.06em;

  --mm-fw-regular: 400;
  --mm-fw-medium:  500;
  --mm-fw-semi:    600;
  --mm-fw-bold:    700;

  /* --- 4. ABSTÄNDE (4-px-Raster) ---------------------------------------- */
  --mm-space-0:  0;      --mm-space-1: 0.25rem;  /*  4 */
  --mm-space-2:  0.5rem; /*  8 */ --mm-space-3: 0.75rem; /* 12 */
  --mm-space-4:  1rem;   /* 16 */ --mm-space-5: 1.25rem; /* 20 */
  --mm-space-6:  1.5rem; /* 24 */ --mm-space-8: 2rem;    /* 32 */
  --mm-space-10: 2.5rem; /* 40 */ --mm-space-12: 3rem;   /* 48 */
  --mm-space-16: 4rem;   /* 64 */ --mm-space-20: 5rem;   /* 80 */

  /* --- 5. RADIEN -------------------------------------------------------- */
  --mm-radius-xs:   4px;
  --mm-radius-sm:   6px;
  --mm-radius-md:  10px;   /* Standard: Buttons, Inputs, Chips */
  --mm-radius-lg:  14px;   /* Karten */
  --mm-radius-xl:  20px;   /* Modals, große Flächen */
  --mm-radius-pill: 999px;

  /* --- 6. ELEVATION (blau getönt, nie neutralschwarz) -------------------- */
  --mm-shadow-0: none;
  --mm-shadow-1: 0 1px 2px rgba(3, 42, 73, .06), 0 1px 1px rgba(3, 42, 73, .04);
  --mm-shadow-2: 0 2px 4px rgba(3, 42, 73, .07), 0 4px 12px rgba(3, 42, 73, .06);
  --mm-shadow-3: 0 4px 8px rgba(3, 42, 73, .08), 0 12px 28px rgba(3, 42, 73, .10);
  --mm-shadow-4: 0 8px 16px rgba(3, 42, 73, .10), 0 24px 48px rgba(3, 42, 73, .14);
  --mm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .12);

  /* --- 7. FOKUS --------------------------------------------------------- */
  --mm-focus-width:  3px;
  --mm-focus-offset: 2px;
  --mm-focus-color:  rgba(0, 128, 211, .55);

  /* --- 8. BEWEGUNG ------------------------------------------------------ */
  --mm-dur-micro:  120ms;   /* Farbwechsel, Hover */
  --mm-dur-base:   180ms;   /* Toggles, Chips */
  --mm-dur-enter:  240ms;   /* Overlays, Sheets */
  --mm-ease:       cubic-bezier(.2, .7, .3, 1);
  --mm-ease-out:   cubic-bezier(0, 0, .2, 1);

  /* --- 9. STEUERELEMENT-GRÖSSEN ----------------------------------------- */
  --mm-control-xs: 32px;
  --mm-control-sm: 40px;
  --mm-control-md: 48px;   /* Standard Desktop + Mobile */
  --mm-control-lg: 56px;
  --mm-control-xl: 64px;
  --mm-touch-min:  48px;   /* Pflicht-Mindestfläche auf Touch */
  --mm-touch-gap:   8px;   /* Mindestabstand zwischen Touch-Zielen */

  /* --- 10. LAYOUT ------------------------------------------------------- */
  --mm-container:      1280px;
  --mm-container-text:   72ch;
  --mm-gutter:      var(--mm-space-4);
}

@media (min-width: 768px)  { :root { --mm-gutter: var(--mm-space-6); } }
@media (min-width: 1280px) { :root { --mm-gutter: var(--mm-space-8); } }

/* ============================================================================
   DUNKELMODUS
   Es werden ausschließlich Rollen umgehängt. Keine Komponente kennt einen Modus.
   Drei Zustände:  ohne Attribut oder data-mm-theme="auto" → Systemvorgabe
                   data-mm-theme="light" → immer hell
                   data-mm-theme="dark"  → immer dunkel
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-mm-theme="light"]) {
    color-scheme: dark;
    --mm-bg:#0C1720; --mm-surface:#13212C; --mm-surface-2:#1B2C3A; --mm-bg-subtle:#101C26;
    --mm-bg-muted:#1B2C3A; --mm-bg-inverse:#E9F0F6; --mm-overlay:rgba(2,10,16,.62);
    --mm-text:#E9F0F6;            /* 15,8:1 */
    --mm-text-secondary:#BDCBD8;  /* 11,0:1 */
    --mm-text-muted:#9BABBA;      /*  7,7:1 — Untergrenze */
    --mm-text-on-primary:#032A49; --mm-text-link:#8CC5FF;
    --mm-border:#26384A;
    --mm-border-strong:#5F7890;   /* 3,95:1 — Pflicht nach WCAG 1.4.11 */
    --mm-border-focus:var(--mm-primary-300);
    --mm-action:var(--mm-primary-400); --mm-action-hover:var(--mm-primary-300);
    --mm-action-active:var(--mm-primary-200); --mm-action-subtle:#16293A;
    --mm-action-text:var(--mm-primary-300);   /* 9,7:1 auf Karte */
    --mm-action-border:#5A82A8;               /* 4,1:1 */
    --mm-success-50:#0E2418; --mm-success-100:#12331F; --mm-success-200:#1B4A2C;
    --mm-success-600:#6BC380; --mm-success-700:#8AD79B; --mm-success-800:#C0EAC7;
    --mm-warning-50:#2A1B06; --mm-warning-100:#3A2609; --mm-warning-200:#55380D;
    --mm-warning-600:#F49100; --mm-warning-700:#FFB56C; --mm-warning-800:#FFD4AE;
    --mm-danger-50:#2B1315; --mm-danger-100:#3B181B; --mm-danger-200:#562126;
    --mm-danger-600:#FF817A; --mm-danger-700:#FFAFA7; --mm-danger-800:#FFD1CC;
    --mm-info-50:#0A2430; --mm-info-100:#0E3040; --mm-info-200:#14465C;
    --mm-info-600:#47BCE4; --mm-info-700:#83D3F3; --mm-info-800:#B5E6FB;
    --mm-accent-100:#33260A; --mm-accent-800:#FAD998;
    --mm-immo-50:#0B2233;      --mm-immo-100:#0F2E44;      --mm-immo-700:#7CC3FF;
    --mm-wohnen-50:#062326;    --mm-wohnen-100:#093034;    --mm-wohnen-700:#4FD8DF;
    --mm-auto-50:#1B1733;      --mm-auto-100:#251F45;      --mm-auto-700:#B7A8FF;
    --mm-handwerk-50:#2A1409;  --mm-handwerk-100:#3A1C0C;  --mm-handwerk-700:#FF9C6E;
    --mm-sonstiges-50:#2A1129; --mm-sonstiges-100:#3A1839; --mm-sonstiges-700:#E79FE4;
    --mm-finanz-50:#251C05;    --mm-finanz-100:#332708;    --mm-finanz-700:#E3B93C;
    --mm-versich-50:#052620;   --mm-versich-100:#08332B;   --mm-versich-700:#4FD3AC;
    --mm-energie-50:#16240A;   --mm-energie-100:#1E320E;   --mm-energie-700:#A7CE6C;
    --mm-restnd-50:#2A1119;    --mm-restnd-100:#3A1823;    --mm-restnd-700:#E9A2BC;
    /* Tiefe entsteht im Dunkeln durch eine helle Oberkante, nicht durch Schatten */
    --mm-shadow-1:0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5);
    --mm-shadow-2:0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.55);
    --mm-shadow-3:0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.62);
    --mm-shadow-4:0 1px 0 rgba(255,255,255,.08), 0 24px 52px rgba(0,0,0,.7);
    --mm-focus-color:rgba(152,204,255,.6);
  }
}
:root[data-mm-theme="dark"] {
    color-scheme: dark;
    --mm-bg:#0C1720; --mm-surface:#13212C; --mm-surface-2:#1B2C3A; --mm-bg-subtle:#101C26;
    --mm-bg-muted:#1B2C3A; --mm-bg-inverse:#E9F0F6; --mm-overlay:rgba(2,10,16,.62);
    --mm-text:#E9F0F6;            /* 15,8:1 */
    --mm-text-secondary:#BDCBD8;  /* 11,0:1 */
    --mm-text-muted:#9BABBA;      /*  7,7:1 — Untergrenze */
    --mm-text-on-primary:#032A49; --mm-text-link:#8CC5FF;
    --mm-border:#26384A;
    --mm-border-strong:#5F7890;   /* 3,95:1 — Pflicht nach WCAG 1.4.11 */
    --mm-border-focus:var(--mm-primary-300);
    --mm-action:var(--mm-primary-400); --mm-action-hover:var(--mm-primary-300);
    --mm-action-active:var(--mm-primary-200); --mm-action-subtle:#16293A;
    --mm-action-text:var(--mm-primary-300);   /* 9,7:1 auf Karte */
    --mm-action-border:#5A82A8;               /* 4,1:1 */
    --mm-success-50:#0E2418; --mm-success-100:#12331F; --mm-success-200:#1B4A2C;
    --mm-success-600:#6BC380; --mm-success-700:#8AD79B; --mm-success-800:#C0EAC7;
    --mm-warning-50:#2A1B06; --mm-warning-100:#3A2609; --mm-warning-200:#55380D;
    --mm-warning-600:#F49100; --mm-warning-700:#FFB56C; --mm-warning-800:#FFD4AE;
    --mm-danger-50:#2B1315; --mm-danger-100:#3B181B; --mm-danger-200:#562126;
    --mm-danger-600:#FF817A; --mm-danger-700:#FFAFA7; --mm-danger-800:#FFD1CC;
    --mm-info-50:#0A2430; --mm-info-100:#0E3040; --mm-info-200:#14465C;
    --mm-info-600:#47BCE4; --mm-info-700:#83D3F3; --mm-info-800:#B5E6FB;
    --mm-accent-100:#33260A; --mm-accent-800:#FAD998;
    --mm-immo-50:#0B2233;      --mm-immo-100:#0F2E44;      --mm-immo-700:#7CC3FF;
    --mm-wohnen-50:#062326;    --mm-wohnen-100:#093034;    --mm-wohnen-700:#4FD8DF;
    --mm-auto-50:#1B1733;      --mm-auto-100:#251F45;      --mm-auto-700:#B7A8FF;
    --mm-handwerk-50:#2A1409;  --mm-handwerk-100:#3A1C0C;  --mm-handwerk-700:#FF9C6E;
    --mm-sonstiges-50:#2A1129; --mm-sonstiges-100:#3A1839; --mm-sonstiges-700:#E79FE4;
    --mm-finanz-50:#251C05;    --mm-finanz-100:#332708;    --mm-finanz-700:#E3B93C;
    --mm-versich-50:#052620;   --mm-versich-100:#08332B;   --mm-versich-700:#4FD3AC;
    --mm-energie-50:#16240A;   --mm-energie-100:#1E320E;   --mm-energie-700:#A7CE6C;
    --mm-restnd-50:#2A1119;    --mm-restnd-100:#3A1823;    --mm-restnd-700:#E9A2BC;
    /* Tiefe entsteht im Dunkeln durch eine helle Oberkante, nicht durch Schatten */
    --mm-shadow-1:0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5);
    --mm-shadow-2:0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.55);
    --mm-shadow-3:0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.62);
    --mm-shadow-4:0 1px 0 rgba(255,255,255,.08), 0 24px 52px rgba(0,0,0,.7);
    --mm-focus-color:rgba(152,204,255,.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --mm-dur-micro: 1ms; --mm-dur-base: 1ms; --mm-dur-enter: 1ms; }
}