/* ============================================
   Beit HaMetaplim — Global Theme Tokens
   Light mode (default) + Dark mode override
   ============================================ */

:root {
    /* Background */
    --t-bg: #FAF8F4;
    --t-bg-card: #FFFFFF;
    --t-bg-card-hover: #F0F2F5;
    --t-bg-secondary: #f8f9fa;

    /* Text */
    --t-text: #1A2D33;
    --t-text-secondary: #4B5563;
    --t-text-muted: #6e7681;

    /* Borders */
    --t-border: rgba(47, 133, 146, 0.12);
    --t-border-strong: rgba(47, 133, 146, 0.3);

    /* Brand colors */
    --t-gold: #D4AF37;
    --t-gold-text: #8B6914;          /* WCAG AA on white/cream (~4.6:1) */
    --t-gold-light: #E6C65A;
    --t-gold-glow: rgba(212, 175, 55, 0.25);
    --t-gradient-gold: linear-gradient(135deg, #D4AF37 0%, #E6C65A 100%);
    --t-deep-petrol: #003B46;
    --t-muted-teal: #00606B;
    --t-dusty-aqua: #2F8592;
    --t-frost-white: #E8F1F2;

    /* Status */
    --t-success: #00b894;
    --t-warning: #d29922;
    --t-danger: #f85149;
    --t-info: #58a6ff;

    /* Shadows */
    --t-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --t-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --t-shadow-lg: 0 10px 30px rgba(0,0,0,0.1);

    /* Nav */
    --t-nav-bg: rgba(255, 255, 255, 0.95);
    --t-nav-text: #003B46;

    /* Sidebar (for portal pages) */
    --t-sidebar-bg: #0a3a42;
    --t-sidebar-hover: #F3F4F6;
    --t-sidebar-active: #EBF5F7;

    /* UI */
    --t-btn-radius: 10px;

    /* Fonts (unchanged across themes) */
    --t-font-display: 'Frank Ruhl Libre', 'Noto Serif Hebrew', serif;
    --t-font-body: 'Heebo', sans-serif;
}

/* ============================================
   Dark Mode Overrides — Petrol Dark (Branded)
   ============================================ */
[data-theme="dark"] {
    /* Background — Deep petrol tones, not generic gray */
    --t-bg: #091B21;
    --t-bg-card: #0F2A33;
    --t-bg-card-hover: #153842;
    --t-bg-secondary: #0C2229;

    /* Text — Warm whites, not harsh pure-white */
    --t-text: #E8F1F2;
    --t-text-secondary: #9BB5BD;
    --t-text-muted: #6A8E97;

    /* Borders — Teal-tinted, not gray */
    --t-border: rgba(59, 160, 172, 0.15);
    --t-border-strong: rgba(59, 160, 172, 0.3);

    /* Brand gold — Brighter for dark backgrounds */
    --t-gold: #E6C65A;
    --t-gold-text: #E6C65A;
    --t-gold-light: #F0D875;
    --t-gold-glow: rgba(230, 198, 90, 0.25);
    --t-gradient-gold: linear-gradient(135deg, #E6C65A 0%, #F0D875 100%);

    /* Brand teal — Brighter variants for dark */
    --t-deep-petrol: #0F2830;
    --t-muted-teal: #3AA0AC;
    --t-dusty-aqua: #5BBFCC;
    --t-frost-white: #0C2229;

    /* Status */
    --t-success: #3fb950;
    --t-warning: #e6b422;
    --t-danger: #f85149;
    --t-info: #58a6ff;

    /* Shadows — Stronger for dark context */
    --t-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --t-shadow-md: 0 4px 14px rgba(0,0,0,0.5);
    --t-shadow-lg: 0 10px 35px rgba(0,0,0,0.6);

    /* Nav — Translucent petrol */
    --t-nav-bg: rgba(9, 27, 33, 0.97);
    --t-nav-text: rgba(232, 241, 242, 0.95);

    /* Sidebar — Deep petrol gradient */
    --t-sidebar-bg: #061418;
    --t-sidebar-hover: #0F2A33;
    --t-sidebar-active: #153842;
}

/* ============================================
   Theme Toggle Button — Inline Nav Style
   ============================================ */
.theme-toggle-btn {
    position: relative;
    z-index: 100;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--t-gold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.15);
    background: rgba(212, 175, 55, 0.15);
    color: var(--t-gold-light);
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--t-gold);
    outline-offset: 2px;
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
}

/* Light mode: show moon (switch-to-dark affordance) */
.theme-toggle-btn .icon-moon { opacity: 1; transform: rotate(0deg); }
.theme-toggle-btn .icon-sun  { opacity: 0; transform: rotate(-90deg); }

/* Dark mode: show sun (switch-to-light affordance) */
[data-theme="dark"] .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(90deg); }
[data-theme="dark"] .theme-toggle-btn .icon-sun  { opacity: 1; transform: rotate(0deg); }

/* Fallback: fixed position for pages with no nav (summaries etc.) */
.theme-toggle-btn--fixed {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border: 1px solid var(--t-border);
    background: var(--t-bg-card);
    box-shadow: var(--t-shadow-md);
    font-size: 18px;
}

.theme-toggle-btn--fixed:hover {
    background: var(--t-gold);
    color: var(--t-bg);
    border-color: var(--t-gold);
}

/* ============================================
   Logo Image — replaces FA icon in navbars/footers
   ============================================ */
.logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.logo:hover .logo-img {
    transform: scale(1.05);
}

/* Smaller variant for form pages and sidebars */
.logo-img--sm {
    height: 32px;
    padding: 2px 4px;
    border-radius: 6px;
}

@media (max-width: 480px) {
    .logo-img { height: 44px; padding: 2px 4px; }
    .logo-img--sm { height: 26px; }
}

/* ============================================
   Smooth transition on theme change
   ============================================ */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}