/* Design tokens. The whole piece reads as one quiet office. */
:root {
  /* Paper / desk palette */
  --paper:        #F4EFE6;   /* page background — warm off-white */
  --paper-2:      #ECE4D6;   /* desk surface — slightly deeper */
  --paper-edge:   #D9CFBC;
  --ink:          #1B1A17;
  --ink-2:        #3B3A35;
  --ink-soft:     #6F6A60;
  --rule:         #D8CFBE;

  /* App chrome (the sealed CRM) */
  --app-bg:       #FFFFFF;
  --app-chrome:   #F2F2F2;
  --app-rule:     #E2E2E2;
  --app-accent:   #2C5BD6;
  --app-accent-2: #1F47AE;
  --app-text:     #1B1A17;
  --app-muted:    #8B8B8B;

  /* Sticky note colors (Post-it pad family — slightly desaturated, warmer paper tones) */
  --sticky-yellow: #FFE56D;
  --sticky-yellow-edge: #E8C84A;
  --sticky-pink:   #FF9FB6;
  --sticky-pink-edge: #E07F95;
  --sticky-blue:   #AFD3F2;
  --sticky-blue-edge: #6EA8E0;
  --sticky-green:  #B8E5B0;
  --sticky-green-edge: #7EC074;

  /* Spreadsheet (mirrors the green-tinted shadow tool) */
  --sheet-bg:     #F7FBF6;
  --sheet-grid:   #C9DCC4;
  --sheet-head:   #2E7D43;

  /* Focus ring */
  --focus: #2C5BD6;

  /* Scale */
  --gutter: clamp(16px, 3vw, 32px);
  --radius: 6px;
  --shadow-sticky: 0 6px 14px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-monitor: 0 18px 40px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sticky-font: "Kalam", "Caveat", "Patrick Hand", "Bradley Hand", "Marker Felt", cursive;
}

@media (prefers-color-scheme: dark) {
  /* Stay in light mode for the artwork — the office is daylit. */
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-feature-settings: "ss01", "ss02", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}