/* ==========================================================================
   BaharLink Theme - tokens.css
   Source of truth for all design tokens. Imported first; consumed by
   base.css, layout.css, components.css, and the block editor.

   All colors meet WCAG 2.2 AA contrast against their intended background.
   Brand colors (--primary, --accent) can be overridden from the Customizer
   via inline <style> tag in wp_head (see inc/enqueue.php).
   ========================================================================== */

/* ---- Light theme (default) ---------------------------------------------- */
:root,
[data-theme="light"] {
    /* Surfaces */
    --bl-bg:           #F7F9FC;
    --bl-bg-subtle:    #EEF2F8;
    --bl-surface:      #FFFFFF;
    --bl-surface-2:    #F1F5F9;
    --bl-surface-3:    #E2E8F0;

    /* Text */
    --bl-text:         #0F172A;
    --bl-text-muted:   #475569;
    --bl-text-subtle:  #64748B;
    --bl-text-on-primary: #FFFFFF;

    /* Brand */
    --bl-primary:      #1D4ED8;
    --bl-primary-hover:#1E40AF;
    --bl-primary-soft: #DBEAFE;
    --bl-accent:       #0F766E;
    --bl-accent-hover: #115E59;
    --bl-accent-soft:  #CCFBF1;

    /* Status */
    --bl-success:      #16A34A;
    --bl-success-soft: #DCFCE7;
    --bl-warning:      #B45309;
    --bl-warning-soft: #FEF3C7;
    --bl-danger:       #B91C1C;
    --bl-danger-soft:  #FEE2E2;
    --bl-info:         #1D4ED8;
    --bl-info-soft:    #DBEAFE;

    /* Border + shadow */
    --bl-border:       #E2E8F0;
    --bl-border-strong:#CBD5E1;
    --bl-ring:         rgba(29, 78, 216, 0.35);

    /* Shadow scale */
    --bl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --bl-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --bl-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

    /* Gradients */
    --bl-grad-fallback-1: #1D4ED8;
    --bl-grad-fallback-2: #0F766E;
}

/* ---- Dark theme --------------------------------------------------------- */
[data-theme="dark"] {
    --bl-bg:           #0B1220;
    --bl-bg-subtle:    #111A2E;
    --bl-surface:      #111A2E;
    --bl-surface-2:    #1A2540;
    --bl-surface-3:    #243150;

    --bl-text:         #E6EDF7;
    --bl-text-muted:   #94A3B8;
    --bl-text-subtle:  #64748B;
    --bl-text-on-primary: #0B1220;

    --bl-primary:      #60A5FA;
    --bl-primary-hover:#93C5FD;
    --bl-primary-soft: rgba(96, 165, 250, 0.15);
    --bl-accent:       #2DD4BF;
    --bl-accent-hover: #5EEAD4;
    --bl-accent-soft:  rgba(45, 212, 191, 0.15);

    --bl-success:      #4ADE80;
    --bl-success-soft: rgba(74, 222, 128, 0.15);
    --bl-warning:      #FBBF24;
    --bl-warning-soft: rgba(251, 191, 36, 0.15);
    --bl-danger:       #F87171;
    --bl-danger-soft:  rgba(248, 113, 113, 0.15);
    --bl-info:         #60A5FA;
    --bl-info-soft:    rgba(96, 165, 250, 0.15);

    --bl-border:       #1E293B;
    --bl-border-strong:#334155;
    --bl-ring:         rgba(96, 165, 250, 0.4);

    --bl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --bl-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.6);

    --bl-grad-fallback-1: #1D4ED8;
    --bl-grad-fallback-2: #0F766E;
}

/* ---- Spacing scale (4px base) ------------------------------------------- */
:root {
    --bl-space-1:  0.25rem;
    --bl-space-2:  0.5rem;
    --bl-space-3:  0.75rem;
    --bl-space-4:  1rem;
    --bl-space-5:  1.25rem;
    --bl-space-6:  1.5rem;
    --bl-space-8:  2rem;
    --bl-space-10: 2.5rem;
    --bl-space-12: 3rem;
    --bl-space-16: 4rem;
    --bl-space-20: 5rem;
    --bl-space-24: 6rem;
}

/* ---- Container widths --------------------------------------------------- */
:root {
    --bl-container:      1200px;
    --bl-container-wide: 1320px;
    --bl-container-narrow: 760px;
    --bl-container-pad:  clamp(1rem, 0.7rem + 1.5vw, 2rem);
}

/* ---- Radii -------------------------------------------------------------- */
:root {
    --bl-radius-sm: 6px;
    --bl-radius:    10px;
    --bl-radius-lg: 16px;
    --bl-radius-xl: 24px;
    --bl-radius-pill: 999px;
}

/* ---- Typography --------------------------------------------------------- */
:root {
    --bl-font-body:    "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --bl-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Fluid type scale (Persian-friendly ratios) */
    --bl-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --bl-fs-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
    --bl-fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --bl-fs-md:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --bl-fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    --bl-fs-xl:   clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
    --bl-fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    --bl-fs-3xl:  clamp(2.125rem, 1.7rem + 2.1vw, 3rem);

    --bl-lh-tight:   1.2;
    --bl-lh-snug:    1.4;
    --bl-lh-normal:  1.6;
    --bl-lh-relaxed: 1.75;

    --bl-measure: 70ch;

    --bl-fw-regular:  400;
    --bl-fw-medium:   500;
    --bl-fw-semibold: 600;
    --bl-fw-bold:     700;
}

/* ---- Z-index scale ------------------------------------------------------ */
:root {
    --bl-z-base:    1;
    --bl-z-sticky:  100;
    --bl-z-drawer:  1000;
    --bl-z-overlay: 1100;
    --bl-z-toast:   1200;
}

/* ---- Motion ------------------------------------------------------------- */
:root {
    --bl-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --bl-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --bl-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Header dimensions -------------------------------------------------- */
:root {
    --bl-header-h:        72px;
    --bl-header-h-mobile: 56px;
    --bl-bottom-nav-h:    64px;
    --bl-announcement-h:  40px;
}

/* ---- Focus ring --------------------------------------------------------- */
:root {
    --bl-focus-ring: 0 0 0 3px var(--bl-ring);
}

/* ---- Reduced motion preference ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --bl-transition: 0ms;
        --bl-transition-fast: 0ms;
        --bl-transition-slow: 0ms;
    }
}