/* =========================================================
   Khata SaaS — Base + CSS Variables
   ========================================================= */
:root {
  /* Primary / Brand */
  --primary:         #1A73E8;
  --primary-hover:   #1558B0;
  --primary-soft:    rgba(26, 115, 232, 0.10);
  --primary-border:  rgba(26, 115, 232, 0.25);

  /* Semantic */
  --success:         #28A745;
  --success-soft:    rgba(40, 167, 69, 0.10);
  --warning:         #FFC107;
  --warning-soft:    rgba(255, 193, 7, 0.12);
  --danger:          #DC3545;
  --danger-soft:     rgba(220, 53, 69, 0.10);
  --info:            #17A2B8;
  --info-soft:       rgba(23, 162, 184, 0.10);

  /* Light (default) */
  --bg-body:         #F4F6FB;
  --bg-card:         #FFFFFF;
  --bg-sidebar:      #1C1C2E;
  --bg-header:       #FFFFFF;
  --bg-input:        #FFFFFF;
  --bg-hover:        #F0F4FF;
  --bg-overlay:      rgba(0, 0, 0, 0.45);

  --text-primary:    #1C1C2E;
  --text-secondary:  #4A5568;
  --text-muted:      #8A96A8;
  --text-inverse:    #FFFFFF;
  --text-sidebar:    #B8C0CC;
  --text-sidebar-active: #FFFFFF;

  --border-color:    #E2E8F0;
  --border-input:    #CBD5E0;

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:       0 10px 40px rgba(0,0,0,0.12);
  --shadow-card:     0 2px 8px rgba(0,0,0,0.06);

  --sidebar-width:      260px;
  --sidebar-collapsed:  70px;
  --sidebar-bg:         #1C1C2E;
  --sidebar-active-bg:  rgba(26, 115, 232, 0.18);
  --sidebar-active-border: #1A73E8;

  --header-height:   64px;

  --font-main:      'Hind Siliguri', 'Noto Sans Bengali', 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

.muted { color: var(--text-muted); }

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-md);
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* Auth pages */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
  background: linear-gradient(135deg, #1A73E8 0%, #6dd5ed 100%);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card); padding: 32px 28px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand i { font-size: 48px; color: var(--primary); }
.auth-brand h3 { margin: 8px 0 4px; color: var(--text-primary); }