frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Cream / warm parchment palette */
  --bg-base:       #f5f0e8;
  --bg-surface:    #faf7f2;
  --bg-elevated:   #ffffff;
  --bg-hover:      #ede8de;
  --bg-active:     #e4ddd0;

  --border:        #ddd6c8;
  --border-strong: #c9c0b0;

  --text-primary:  #1c1814;
  --text-secondary:#4a4540;
  --text-muted:    #8c8278;
  --text-faint:    #b8b0a4;

  --accent:        #2d5a3d;
  --accent-hover:  #234a31;
  --accent-light:  #eef5f0;
  --accent-border: #a8c8b4;

  --amber:         #c17d11;
  --amber-light:   #fdf3e0;
  --amber-border:  #e8c070;

  --rose:          #9b3a3a;
  --rose-light:    #fdf0f0;
  --rose-border:   #dba8a8;

  --blue:          #2a5080;
  --blue-light:    #eef3fa;
  --blue-border:   #a0bcd8;

  --violet:        #5a3a7a;
  --violet-light:  #f3eefa;
  --violet-border: #c0a0d8;

  /* Status */
  --s-todo:        #6b6258;
  --s-todo-bg:     #f0ece5;
  --s-progress:    var(--blue);
  --s-progress-bg: var(--blue-light);
  --s-review:      var(--violet);
  --s-review-bg:   var(--violet-light);
  --s-done:        var(--accent);
  --s-done-bg:     var(--accent-light);
  --s-cancelled:   var(--rose);
  --s-cancelled-bg:var(--rose-light);

  /* Priority */
  --p-low:      var(--accent);
  --p-medium:   var(--amber);
  --p-high:     #c15a11;
  --p-critical: var(--rose);

  --sidebar-w:  252px;
  --header-h:   56px;
  --radius:     6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --shadow-sm:  0 1px 3px rgba(28,24,20,0.08);
  --shadow-md:  0 4px 12px rgba(28,24,20,0.1);
  --shadow-lg:  0 8px 32px rgba(28,24,20,0.14);
}

html, body, #root { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: 'Lora', serif; line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; }
code, pre { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }