/* ============================================================
   CHURCHBOOK THEME — CSS Custom Properties
   Light mode (default) + Dark mode
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  /* --- Primary brand --- */
  --color-primary:         #4F46E5;   /* Indigo — trust, warmth */
  --color-primary-hover:   #4338CA;
  --color-primary-light:   #EEF2FF;
  --color-primary-50:      #EEF2FF;
  --color-primary-100:     #E0E7FF;
  --color-primary-500:     #6366F1;
  --color-primary-600:     #4F46E5;
  --color-primary-700:     #4338CA;
  --color-primary-rgb:     79,70,229;

  /* --- Accent (engagement: likes, hearts, CTAs) --- */
  --color-accent:          #E11D48;   /* Rose — warm, community */
  --color-accent-hover:    #BE123C;
  --color-accent-light:    #FFF1F2;
  --color-accent-50:       #FFF1F2;
  --color-accent-500:      #F43F5E;
  --color-accent-600:      #E11D48;

  /* --- Secondary (teal — calm, spiritual) --- */
  --color-secondary:       #0D9488;
  --color-secondary-hover: #0F766E;
  --color-secondary-light: #F0FDFA;

  /* --- Surfaces --- */
  --color-bg:              #F7F7F5;
  --color-surface:         #FFFFFF;
  --color-surface-hover:   #F9FAFB;
  --color-surface-raised:  #FFFFFF;
  --color-card:            #FFFFFF;
  --color-card-hover:      #FAFAF8;

  /* --- Sidebar (light — clean & open) --- */
  --color-sidebar:         #FFFFFF;
  --color-sidebar-hover:   #F1F5F9;
  --color-sidebar-text:    #475569;
  --color-sidebar-text-active: #1E293B;
  --color-sidebar-icon:    #94A3B8;
  --color-sidebar-icon-active: #4F46E5;
  --color-sidebar-divider: #E2E8F0;

  /* --- Top navbar (light) --- */
  --color-topbar:          #FFFFFF;
  --color-topbar-text:     #1E293B;
  --color-topbar-icon:     #64748B;
  --color-topbar-icon-hover: #1E293B;

  /* --- Text --- */
  --color-text:            #1E293B;
  --color-text-secondary:  #64748B;
  --color-text-muted:      #94A3B8;
  --color-text-inverse:    #FFFFFF;
  --color-link:            #4F46E5;
  --color-link-hover:      #4338CA;

  /* --- Borders --- */
  --color-border:          #E2E8F0;
  --color-border-light:    #F1F5F9;
  --color-border-focus:    #818CF8;

  /* --- Status --- */
  --color-success:         #16A34A;
  --color-success-bg:      #d4edda;
  --color-success-border:  #c3e6cb;
  --color-success-text:    #155724;
  --color-warning:         #F59E0B;
  --color-danger:          #DC2626;
  --color-danger-bg:       #f8d7da;
  --color-danger-border:   #f5c6cb;
  --color-danger-text:     #721c24;
  --color-info:            #2563EB;

  /* --- Badges --- */
  --color-badge-bg:        #EF4444;
  --color-badge-text:      #FFFFFF;

  /* --- Stories ring --- */
  --color-story-unread:    linear-gradient(135deg, #4F46E5, #E11D48);
  --color-story-read:      #CBD5E1;

  /* --- Shadows --- */
  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:             0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:             0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-card:           0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:     0 4px 12px rgba(0, 0, 0, 0.1);

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

  /* --- Typography --- */
  --font-heading:          'Nunito', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:          0.75rem;    /* 12px */
  --font-size-sm:          0.8125rem;  /* 13px */
  --font-size-base:        0.9375rem;  /* 15px */
  --font-size-lg:          1.125rem;   /* 18px */
  --font-size-xl:          1.25rem;    /* 20px */
  --font-size-2xl:         1.5rem;     /* 24px */
  --font-size-3xl:         1.875rem;   /* 30px */

  /* --- Spacing --- */
  --sidebar-width:         260px;
  --sidebar-width-collapsed: 70px;
  --topbar-height:         60px;
  --bottombar-height:      64px;

  /* --- Transitions --- */
  --transition-fast:       150ms ease;
  --transition-normal:     200ms ease;
  --transition-slow:       300ms ease;

  /* --- Z-index scale --- */
  --z-dropdown:            10;
  --z-sticky:              20;
  --z-sidebar:             30;
  --z-topbar:              1000;
  --z-modal:               1100;
  --z-toast:               1200;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-primary:         #818CF8;
  --color-primary-hover:   #6366F1;
  --color-primary-light:   #1E1B4B;
  --color-primary-50:      #1E1B4B;
  --color-primary-100:     #312E81;
  --color-primary-500:     #818CF8;
  --color-primary-600:     #6366F1;
  --color-primary-700:     #4F46E5;
  --color-primary-rgb:     129,140,248;

  --color-accent:          #FB7185;
  --color-accent-hover:    #F43F5E;
  --color-accent-light:    #2D1019;
  --color-accent-50:       #2D1019;
  --color-accent-500:      #FB7185;
  --color-accent-600:      #F43F5E;

  --color-secondary:       #2DD4BF;
  --color-secondary-hover: #14B8A6;
  --color-secondary-light: #0D2D2A;

  --color-bg:              #0F172A;
  --color-surface:         #1E293B;
  --color-surface-hover:   #273548;
  --color-surface-raised:  #1E293B;
  --color-card:            #1E293B;
  --color-card-hover:      #273548;

  --color-sidebar:         #0F172A;
  --color-sidebar-hover:   #1E293B;
  --color-sidebar-text:    #94A3B8;
  --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-icon:    #64748B;
  --color-sidebar-icon-active: #818CF8;
  --color-sidebar-divider: #1E293B;

  --color-topbar:          #0F172A;
  --color-topbar-text:     #F1F5F9;
  --color-topbar-icon:     #64748B;
  --color-topbar-icon-hover: #F1F5F9;

  --color-text:            #F1F5F9;
  --color-text-secondary:  #94A3B8;
  --color-text-muted:      #64748B;
  --color-text-inverse:    #0F172A;
  --color-link:            #818CF8;
  --color-link-hover:      #A5B4FC;

  --color-border:          #334155;
  --color-border-light:    #1E293B;
  --color-border-focus:    #818CF8;

  --color-success:         #4ADE80;
  --color-success-bg:      #0B2E1A;
  --color-success-border:  #14532D;
  --color-success-text:    #86EFAC;
  --color-danger:          #F87171;
  --color-danger-bg:       #2D1019;
  --color-danger-border:   #7F1D1D;
  --color-danger-text:     #FCA5A5;

  --color-story-unread:    linear-gradient(135deg, #818CF8, #FB7185);
  --color-story-read:      #475569;

  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:             0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:             0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-card:           0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:     0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   BASE RESETS using theme variables
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* --- Focus visible for keyboard navigation --- */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Scrollbar styling (webkit) --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}