/* Design-Tokens — warme Neutrals, eine Akzentfarbe (Terrakotta) */
:root {
  color-scheme: light dark;

  --accent:        #c4562f;
  --accent-hover:  #a9461f;
  --accent-soft:   #fbeee8;
  --accent-text:   #ffffff;

  --bg:            #fbfaf8;
  --bg-elevated:   #ffffff;
  --bg-sunken:     #f4f2ee;
  --bg-hover:      #f0ede8;

  --text:          #1c1a17;
  --text-muted:    #6d6760;
  --text-faint:    #97918a;

  --border:        #e6e2db;
  --border-strong: #d3cec5;

  --danger:        #b4342c;
  --danger-soft:   #fbeceb;
  --success:       #2f6b45;
  --warn:          #9a6410;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 26, 23, .06);
  --shadow:    0 2px 12px rgba(28, 26, 23, .08);
  --shadow-lg: 0 12px 40px rgba(28, 26, 23, .16);

  --nav-h: 60px;
  --tap: 44px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:       #e07551;
    --accent-hover: #ef8b69;
    --accent-soft:  #35211a;
    --accent-text:  #1a1512;

    --bg:          #171513;
    --bg-elevated: #201d1a;
    --bg-sunken:   #121110;
    --bg-hover:    #2a2622;

    --text:        #f2efea;
    --text-muted:  #a49d94;
    --text-faint:  #7a736b;

    --border:        #322d28;
    --border-strong: #453e37;

    --danger:      #e2695f;
    --danger-soft: #3a1e1c;
    --success:     #6cbf8c;
    --warn:        #d9a441;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 2px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  }
}