:root {
  --darkGreen: #99A98F;
  --midGreen:  #C1D0B5;
  --lightGreen:#D6E8D8;
  --beige:     #FFF8DE;

  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111111;
  --muted: rgba(0,0,0,0.65);
  --border: #dddddd;


  --radius: 99px;

  --sidebar-w: 150px;
  --sidebar-w-compact: 50px;
  --bottombar-h: 50px;
  --safe-area-inset-bottom: 50px;

    /* Type scale */
  --text-xs:   clamp(10px, 1.0vw, 12px);   /* hints, labels, dividers */
  --text-sm:   clamp(11px, 1.1vw, 13px);   /* secondary text, errors  */
  --text-base: clamp(12px, 1.2vw, 14px);   /* body default            */
  --text-md:   clamp(15px, 1.8vw, 20px);   /* h3                      */
  --text-lg:   clamp(18px, 2.5vw, 26px);   /* h2                      */
  --text-xl:   clamp(22px, 3.5vw, 34px);   /* h1                      */
  --text-brand: clamp(28px, 5vw, 40px);    /* Bloomingo logo          */
}

/* -- Dark theme -------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --darkGreen:  #7a9a70;
  --midGreen:   #3d5c3d;
  --lightGreen: #1e2e1e;
  --beige:      #2a2620;
  --bg:         #121212;
  --surface:    #1e1e1e;
  --text:       #e8e8e8;
  --muted:      rgba(255, 255, 255, 0.5);
  --border:     #333333;
}

[data-theme="dark"] body {
  background-color: var(--bg);
  color: var(--text);
}