/* Design tokens. Every colour, size and radius in the app comes from here, so a new theme is just a new block of values.
   Dark is the default (CodyChat-style: near-black surfaces, cyan accent). Add themes with [data-theme="name"]. */
:root,
[data-theme="dark"] {
  --bg:            #141414;   /* page */
  --bg-elev:       #191919;   /* modals, panels */
  --bg-card:       #222222;   /* inputs, list rows */
  --bg-hover:      #2a2a2a;
  --bg-head:       #111111;   /* top bar */
  --bg-menu:       #242424;   /* floating menus */
  --row-line:      rgba(255, 255, 255, 0.04);
  --row-hover:     rgba(255, 255, 255, 0.04);
  --strip:         rgba(255, 255, 255, 0.04);   /* tab strip */
  --pill-on:       rgba(255, 255, 255, 0.08);   /* selected tab */
  --line:          #2f2f2f;   /* borders */
  --text:          #f2f2f2;
  --text-muted:    #9b9b9b;
  --accent:        #03add8;   /* primary buttons, links */
  --accent-hover:  #12bde8;
  --accent-text:   #ffffff;
  --ok:            #75b30c;   /* "go" buttons: login, cookie ok */
  --ok-hover:      #86c717;
  --ok-text:       #ffffff;
  --danger:        #ff6b6b;
  --danger-bg:     rgba(255, 107, 107, 0.12);
  --success:       #4cc38a;
  --overlay:       rgba(0, 0, 0, 0.72);
  --shadow:        0 24px 70px rgba(0, 0, 0, 0.55);
  --focus:         #ffffff;

  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 26px;

  --z-layer: 1000;
  --z-over: 1100;
  --z-toast: 1300;
  --z-cookie: 900;
}

[data-theme="light"] {
  --bg: #f3f4f6;  --bg-elev: #ffffff;  --bg-card: #eef0f3;  --bg-hover: #e4e7ec;  --line: #d9dde3;
  --text: #17191c;  --text-muted: #5f6672;
  --accent: #0287ab;  --accent-hover: #0399c2;
  --overlay: rgba(10, 14, 20, 0.55);  --shadow: 0 24px 60px rgba(15, 25, 40, 0.25);  --focus: #17191c;
}