/* KeepNotes — design tokens. Single source of truth for color, type, space, motion. */
:root {
  /* surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --scrim: rgba(0,0,0,.5);
  --hover: rgba(60,64,67,.08);
  --active: rgba(60,64,67,.16);
  /* text */
  --text: #202124;
  --text-muted: #5f6368;
  --text-faint: #676b70;
  --on-accent: #ffffff;
  /* accent + lines */
  --accent: #1a73e8;
  --accent-hover: #1765cc;
  --accent-soft: rgba(26,115,232,.12);
  --border: #dadce0;
  --border-soft: #e8eaed;
  --danger: #d93025;
  --success: #188038;
  --warning: #b06000;
  /* radii */
  --r-card: 8px;
  --r-dialog: 12px;
  --r-pill: 999px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 16px;
  --r-full: 50%;
  /* elevation */
  --shadow-1: 0 1px 2px rgba(60,64,67,.18), 0 1px 3px rgba(60,64,67,.10);
  --shadow-2: 0 1px 3px rgba(60,64,67,.22), 0 4px 8px rgba(60,64,67,.14);
  --shadow-3: 0 4px 8px rgba(60,64,67,.20), 0 8px 24px rgba(60,64,67,.18);
  /* type scale */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-22: 22px; --fs-28: 28px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* layout */
  --topbar-h: 64px;
  --sidebar-w: 280px;
  --bp-sm: 600px; --bp-md: 900px; --bp-lg: 1024px; --bp-xl: 1440px;
  --ease: cubic-bezier(.2,0,0,1);
  --dur: 150ms;
  /* note palette — light */
  --note-default: #ffffff;
  --note-red: #f28b82;
  --note-orange: #fbbc04;
  --note-yellow: #fff475;
  --note-green: #ccff90;
  --note-teal: #a7ffeb;
  --note-blue: #cbf0f8;
  --note-darkblue: #aecbfa;
  --note-purple: #d7aefb;
  --note-pink: #fdcfe8;
  --note-brown: #e6c9a8;
  --note-gray: #e8eaed;
  --note-on: #202124;
  --note-line: rgba(60,64,67,.16);
}

html[data-theme="dark"] {
  --bg: #1f1f1f;
  --surface: #2a2a2a;
  --surface-2: #333333;
  --surface-3: #3c3c3c;
  --scrim: rgba(0,0,0,.66);
  --hover: rgba(232,234,237,.10);
  --active: rgba(232,234,237,.18);
  --text: #e8eaed;
  --text-muted: #9aa0a6;
  --text-faint: #969ca3;
  --on-accent: #202124;
  --accent: #8ab4f8;
  --accent-hover: #aecbfa;
  --accent-soft: rgba(138,180,248,.16);
  --border: #5f6368;
  --border-soft: #3c3c3c;
  --danger: #f28b82;
  --success: #81c995;
  --warning: #fdd663;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 6px rgba(0,0,0,.55);
  --shadow-3: 0 8px 24px rgba(0,0,0,.6);
  /* ~22% tints over #2a2a2a */
  --note-default: #2a2a2a;
  --note-red: #5c2b29;
  --note-orange: #614a19;
  --note-yellow: #635d19;
  --note-green: #345920;
  --note-teal: #16504b;
  --note-blue: #2d555e;
  --note-darkblue: #1e3a5f;
  --note-purple: #42275e;
  --note-pink: #5b2245;
  --note-brown: #442f19;
  --note-gray: #3c3f43;
  --note-on: #e8eaed;
  --note-line: rgba(232,234,237,.14);
}

/* The note palette also works when applied to a small element (color dot / chip). */
[data-note-color] { --note-bg: var(--note-default); }
[data-note-color="default"]  { --note-bg: var(--note-default); }
[data-note-color="red"]      { --note-bg: var(--note-red); }
[data-note-color="orange"]   { --note-bg: var(--note-orange); }
[data-note-color="yellow"]   { --note-bg: var(--note-yellow); }
[data-note-color="green"]    { --note-bg: var(--note-green); }
[data-note-color="teal"]     { --note-bg: var(--note-teal); }
[data-note-color="blue"]     { --note-bg: var(--note-blue); }
[data-note-color="darkblue"] { --note-bg: var(--note-darkblue); }
[data-note-color="purple"]   { --note-bg: var(--note-purple); }
[data-note-color="pink"]     { --note-bg: var(--note-pink); }
[data-note-color="brown"]    { --note-bg: var(--note-brown); }
[data-note-color="gray"]     { --note-bg: var(--note-gray); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}