@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;800;900&display=swap');

/* ─────────────────────────────────────────────
   ODIN DESIGN TOKENS — Light & Dark
   Brand palette sourced from nathabit.in's own
   stylesheet (2026-09-07): primary #C3502B
   (terracotta), secondary accents #469c84 (sage)
   and #a8bbbf (slate-blue), warm cream surfaces,
   body font Lato. The site's display font
   ("Wolesbro") is a licensed/custom font with no
   public CDN source, so Lato covers headings too
   — safer for a dense dashboard's legibility than
   substituting an unrelated display face anyway.
───────────────────────────────────────────── */
:root {
  /* Backgrounds — warm cream surfaces, not cool gray */
  --bg-app:        #FBF7F2;
  --bg-surface:    #ffffff;
  --bg-surface-2:  #FCF8F8;
  --bg-hover:      rgba(195,80,43,0.05);
  /* Light cream sidebar — nathabit.in itself has no dark chrome anywhere;
     its whole site is light/airy with terracotta as an accent, so this
     matches that literally instead of inventing a dark panel. */
  --sidebar-bg:    #F5EDE3;
  --sidebar-hover: #EDE0D3;
  --sidebar-active:#FAF0EA;

  /* Brand & Accents — nathabit.in primary terracotta */
  --primary:       #C3502B;
  --primary-hover: #A64425;
  --primary-light: #FAF0EA;
  --primary-glow:  rgba(195,80,43,0.15);

  /* Semantics */
  --success:       #469C84;
  --success-bg:    #ECF5F3;
  --success-muted: rgba(70,156,132,0.12);
  --danger:        #D64545;
  --danger-bg:     #FDECEF;
  --danger-muted:  rgba(214,69,69,0.12);
  --warning:       #D4900A;
  --warning-bg:    #FFF3D6;
  --warning-muted: rgba(212,144,10,0.12);
  --info:          #5C7D85;
  --info-bg:       #F1F5F6;
  --info-muted:    rgba(92,125,133,0.12);
  --purple:        #7c3aed;
  --purple-bg:     #f5f3ff;
  --purple-muted:  rgba(124,58,237,0.12);

  /* Typography */
  --text-primary:  #2B2A28;
  --text-secondary:#6B6560;
  --text-muted:    #A39D97;
  --text-dim:      #D8D2CB;

  /* Borders */
  --border:        #E8E2DA;
  --border-subtle: #F2EDE6;

  /* Font families */
  --font-head: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --sidebar-w:     252px;
  --topbar-h:      52px;
  --radius-xl:     16px;
  --radius-lg:     12px;
  --radius-md:     8px;
  --radius-sm:     6px;
  --radius-xs:     4px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);

  /* Transitions */
  --ease-fast:   0.12s cubic-bezier(0.4,0,0.2,1);
  --ease-normal: 0.22s cubic-bezier(0.4,0,0.2,1);
  --ease-spring: 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Dark Mode Overrides ─────────────────── */
[data-theme="dark"] {
  --bg-app:        #120E0B;
  --bg-surface:    #1A1512;
  --bg-surface-2:  #211A15;
  --bg-hover:      rgba(255,255,255,0.05);
  --sidebar-bg:    #0D0907;
  --sidebar-hover: #1C1512;
  --sidebar-active:#3D2117;

  --primary:       #E07A4F;
  --primary-hover: #F0956C;
  --primary-light: rgba(224,122,79,0.12);

  --success:       #5CBFA3;
  --success-bg:    rgba(70,156,132,0.15);
  --danger:        #E86A6A;
  --danger-bg:     rgba(214,69,69,0.15);
  --warning:       #E8AC3D;
  --warning-bg:    rgba(212,144,10,0.15);
  --info:          #8FB0B8;
  --info-bg:       rgba(92,125,133,0.15);
  --purple:        #a78bfa;
  --purple-bg:     rgba(124,58,237,0.12);

  --text-primary:  #F5F0EA;
  --text-secondary:#B8B0A6;
  --text-muted:    #6B6560;
  --text-dim:      #453F3A;

  --border:        rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.04);

  --shadow-card: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.5);
}