/* ============================================================
   base.css - Taskified design tokens and base styles
   ============================================================ */

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

/* ── Design tokens ── */
:root {
  --bg:             #f4f7fb;
  --bg-secondary:   #ffffff;
  --bg-tertiary:    #e5e7eb;

  --surface:        #ffffff;
  --surface-hover:  #f3f4f6;

  --surface-border: #d7deee;
  --surface-shadow: rgba(15, 23, 42, 0.05);
  --card-surface:   #ffffff;
  --card-surface-hover: #f8fafc;
  --card-surface-border: rgba(148, 163, 184, 0.34);
  --card-surface-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);

  --card-text:      #1f2937;
  --icon-muted:     rgba(75, 85, 99, 0.72);
  --icon-hover:     rgba(79, 70, 229, 0.12);
  --danger-surface: rgba(239, 68, 68, 0.14);

  --bg-notes-area:  #f8fafc;
  --bg-notes-font:  #1f2937;

  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-tertiary:  #6b7280;
  --text-light:     #f8fafc;

  --accent:         #16a34a;
  --accent-hover:   #15803d;
  --accent-light:   rgba(22,163,74,0.12);
  --accent-secondary: #4f46e5;
  --accent-secondary-light: rgba(79,70,229,0.14);

  --border:         #d7deee;
  --border-focus:   #4f46e5;

  --glow-focus:     rgba(79,70,229,0.18);

  --danger:         #ef4444;
  --warning:        #f59e0b;
  --info:           #374151;
  --info-secondary: #4b5563;
  --column-width:   16%;

  --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code',
               'Source Code Pro', 'Fira Mono', 'Courier New', monospace;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="dark"] {
  --bg:             #111111;
  --bg-secondary:   #181818;
  --bg-tertiary:    #262626;

  --surface:        #202020;
  --surface-hover:  #2a2a2a;

  --surface-border: rgba(255, 255, 255, 0.12);
  --surface-shadow: rgba(0, 0, 0, 0.22);
  --card-surface:   #262626;
  --card-surface-hover: #303030;
  --card-surface-border: rgba(255, 255, 255, 0.11);
  --card-surface-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);

  --card-text:      #f4f4f5;
  --icon-muted:     rgba(244, 244, 245, 0.68);
  --icon-hover:     rgba(129, 140, 248, 0.18);
  --danger-surface: rgba(239, 68, 68, 0.28);

  --bg-notes-area:  #1f1f1f;
  --bg-notes-font:  #f4f4f5;

  --text-primary:   #f4f4f5;
  --text-secondary: rgba(244, 244, 245, 0.82);
  --text-tertiary:  rgba(244, 244, 245, 0.58);
  --text-light:     #f8fafc;

  --accent:         #16a34a;
  --accent-hover:   #22c55e;
  --accent-light:   rgba(22,163,74,0.12);
  --accent-secondary: #818cf8;
  --accent-secondary-light: rgba(129,140,248,0.16);

  --border:         rgba(255, 255, 255, 0.11);
  --border-focus:   #818cf8;

  --glow-focus:     rgba(129,140,248,0.28);

  --danger:         #f87171;
  --warning:        #facc15;
  --info:           #3a3a3a;
  --info-secondary: #4a4a4a;
}

:root[data-theme="matrix"] {
  --bg:             #030803;
  --bg-secondary:   #071007;
  --bg-tertiary:    rgba(28, 86, 42, 0.52);

  --surface:        #081308;
  --surface-hover:  #0d1d0d;

  --surface-border: rgba(99, 220, 132, 0.22);
  --surface-shadow: 0 14px 30px rgba(0, 0, 0, 0.52);
  --card-surface:   #0c1a0c;
  --card-surface-hover: #112411;
  --card-surface-border: rgba(79, 190, 111, 0.34);
  --card-surface-shadow: 0 16px 32px rgba(2, 12, 4, 0.58);

  --card-text:      #d8f5dc;
  --icon-muted:     rgba(153, 236, 173, 0.68);
  --icon-hover:     rgba(99, 220, 132, 0.16);
  --danger-surface: rgba(248, 113, 113, 0.28);

  --bg-notes-area:  #0a170a;
  --bg-notes-font:  #daf5dd;

  --text-primary:   #e1f8e3;
  --text-secondary: rgba(214, 246, 219, 0.82);
  --text-tertiary:  rgba(214, 246, 219, 0.56);
  --text-light:     #eaffef;

  --accent:         #22c55e;
  --accent-hover:   #4ade80;
  --accent-light:   rgba(34, 197, 94, 0.16);
  --accent-secondary: #86efac;
  --accent-secondary-light: rgba(134, 239, 172, 0.16);

  --border:         rgba(134, 239, 172, 0.18);
  --border-focus:   #86efac;

  --glow-focus:     rgba(134,239,172,0.24);

  --danger:         #f87171;
  --warning:        #facc15;
  --info:           rgba(34, 197, 94, 0.72);
  --info-secondary: rgba(134, 239, 172, 0.58);
}

/* ── Base ── */
html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.app-shell[hidden],
.landing-mount[hidden] {
  display: none !important;
}

body.landing-active {
  display: block;
  min-height: 100vh;
  overflow: auto;
}