/* ===========================================================
   warq — design tokens
   Narrow-pane first. Every colour is a token so the whole app
   can be re-skinned (or brand-swapped) from this one file.
   =========================================================== */

:root {
  /* surfaces */
  --bg:            #f6f7f9;
  --bg-elev:       #ffffff;
  --bg-sunken:     #eceef2;
  --bg-hover:      rgba(15, 20, 30, 0.05);
  --bg-active:     rgba(15, 20, 30, 0.09);

  /* text */
  --fg:            #14181f;
  --fg-muted:      #5c6675;
  --fg-dim:        #8a94a3;

  /* lines */
  --line:          #dfe3e9;
  --line-strong:   #c6ccd6;

  /* accent */
  --accent:        #3b6ef0;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(59, 110, 240, 0.12);

  --danger:        #d64545;

  /* note colours — Keep-style, surface + border pairs */
  --c-default-bg:  #ffffff;  --c-default-line: #dfe3e9;
  --c-red-bg:      #fde8e6;  --c-red-line:     #f3c9c5;
  --c-orange-bg:   #fdeada;  --c-orange-line:  #f2d6b4;
  --c-yellow-bg:   #fdf4d3;  --c-yellow-line:  #eee3ae;
  --c-green-bg:    #e2f3e4;  --c-green-line:   #c3e2c7;
  --c-teal-bg:     #d9f1f0;  --c-teal-line:    #b6e0de;
  --c-blue-bg:     #e2ecfd;  --c-blue-line:    #c3d8f7;
  --c-purple-bg:   #ece5fb;  --c-purple-line:  #d5c8f2;
  --c-pink-bg:     #fce4ef;  --c-pink-line:    #f2c5da;
  --c-gray-bg:     #eceef2;  --c-gray-line:    #d8dce3;

  /* geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --gap:  10px;
  --pad:  12px;

  --shadow-1: 0 1px 2px rgba(15, 20, 30, 0.06), 0 1px 1px rgba(15, 20, 30, 0.04);
  --shadow-2: 0 6px 20px rgba(15, 20, 30, 0.12), 0 2px 6px rgba(15, 20, 30, 0.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --topbar-h: 44px;

  /* The text column inside the page. 624px is US Letter's 8.5in minus the
     familiar 1in margins, which at this font size is about an 88-character
     line - wider than the 60-75 usually called comfortable, and the same
     measure a Word or Google Docs page gives you. 500px (~70 chars) is the
     readable-band alternative. */
  --measure: 624px;

  /* US Letter is 8.5in wide, which CSS maps to 816px. With --measure at
     624px the margins land at exactly 1in, the standard document page. */
  --page-w: 8.5in;
}

/* ---- dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14161a;
    --bg-elev:     #1c1f25;
    --bg-sunken:   #101216;
    --bg-hover:    rgba(255, 255, 255, 0.06);
    --bg-active:   rgba(255, 255, 255, 0.10);

    --fg:          #e7eaef;
    --fg-muted:    #9aa4b2;
    --fg-dim:      #6d7684;

    --line:        #2a2f38;
    --line-strong: #3a414c;

    --accent:      #6b96ff;
    --accent-fg:   #0d1220;
    --accent-soft: rgba(107, 150, 255, 0.16);

    --danger:      #ef6b6b;

    --c-default-bg: #1c1f25;  --c-default-line: #2a2f38;
    --c-red-bg:     #3a2422;  --c-red-line:     #55332f;
    --c-orange-bg:  #3a2d1d;  --c-orange-line:  #563f27;
    --c-yellow-bg:  #363018;  --c-yellow-line:  #4e4422;
    --c-green-bg:   #1e3324;  --c-green-line:   #2c4a33;
    --c-teal-bg:    #163232;  --c-teal-line:    #204947;
    --c-blue-bg:    #1c2c46;  --c-blue-line:    #284063;
    --c-purple-bg:  #292140;  --c-purple-line:  #3b2f5c;
    --c-pink-bg:    #3a2130;  --c-pink-line:    #552f46;
    --c-gray-bg:    #23272e;  --c-gray-line:    #333942;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg:          #14161a;
  --bg-elev:     #1c1f25;
  --bg-sunken:   #101216;
  --bg-hover:    rgba(255, 255, 255, 0.06);
  --bg-active:   rgba(255, 255, 255, 0.10);

  --fg:          #e7eaef;
  --fg-muted:    #9aa4b2;
  --fg-dim:      #6d7684;

  --line:        #2a2f38;
  --line-strong: #3a414c;

  --accent:      #6b96ff;
  --accent-fg:   #0d1220;
  --accent-soft: rgba(107, 150, 255, 0.16);

  --danger:      #ef6b6b;

  --c-default-bg: #1c1f25;  --c-default-line: #2a2f38;
  --c-red-bg:     #3a2422;  --c-red-line:     #55332f;
  --c-orange-bg:  #3a2d1d;  --c-orange-line:  #563f27;
  --c-yellow-bg:  #363018;  --c-yellow-line:  #4e4422;
  --c-green-bg:   #1e3324;  --c-green-line:   #2c4a33;
  --c-teal-bg:    #163232;  --c-teal-line:    #204947;
  --c-blue-bg:    #1c2c46;  --c-blue-line:    #284063;
  --c-purple-bg:  #292140;  --c-purple-line:  #3b2f5c;
  --c-pink-bg:    #3a2130;  --c-pink-line:    #552f46;
  --c-gray-bg:    #23272e;  --c-gray-line:    #333942;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
}