/**
 * Global Design Tokens and Base Variables for Akuajae Sites.
 *
 * All variables and rules are strictly scoped under #blisites-root.
 *
 * @package Akuajae\Sites
 */

#blisites-root {
    /* --- Base Typography & Editorial Stacks --- */
    --blisites-font-display: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
    --blisites-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --blisites-font-mono: 'JetBrains Mono', 'Menlo', monospace;
    --blisites-font-heading: var(--blisites-font-sans);
    --blisites-font-base: 16px;
    --blisites-scale: 1.0;
    --blisites-line-height-base: 1.65;
    --blisites-line-height-heading: 1.2;

    /* --- Photography & Editorial Color Palette --- */
    --blisites-accent: #8c7eff;
    --blisites-accent-hover: #7362f0;
    --blisites-accent-rgb: 140, 126, 255;
    --blisites-accent-contrast: #ffffff;
    --blisites-accent-subtle: rgba(140, 126, 255, 0.1);
    --blisites-accent-glow: rgba(140, 126, 255, 0.25);

    --blisites-bg-page: #ffffff;
    --blisites-bg-surface: #ffffff;
    --blisites-bg-surface-elevated: #ffffff;
    --blisites-bg-subtle: #f8fafc;
    --blisites-bg-warm: #faf8f5;
    --blisites-bg-alt: #f1f5f9;
    --blisites-bg-dark: #0a0d12;
    --blisites-bg-card-dark: #121721;
    --blisites-bg-overlay: rgba(10, 13, 18, 0.65);

    --blisites-text-primary: #0a0d12;
    --blisites-text-secondary: #475569;
    --blisites-text-muted: #8b92a0;
    --blisites-text-inverted: #fbfbfa;
    --blisites-text-inverted-muted: rgba(251, 251, 250, 0.75);

    --blisites-border-color: #e2e8f0;
    --blisites-border-subtle: #e2e8f0;
    --blisites-border-hairline: rgba(0, 0, 0, 0.08);
    --blisites-border-dark-hairline: rgba(255, 255, 255, 0.12);

    /* --- Visual Style / Border Radius Presets --- */
    --blisites-radius: 14px;
    --blisites-radius-sm: 8px;
    --blisites-radius-lg: 20px;
    --blisites-radius-full: 999px;

    /* --- Layout & Fluid Spacing Rhythm --- */
    --blisites-container-max: 1280px;
    --blisites-container-padding: clamp(1.25rem, 5vw, 3.5rem);
    --blisites-space-unit: calc(1rem * var(--blisites-scale, 1));
    --blisites-section-gap: calc(5.5rem * var(--blisites-scale, 1));
    --blisites-section-gap-sm: calc(3rem * var(--blisites-scale, 1));

    /* --- Motion, Shadows & Ambient Elevation --- */
    --blisites-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --blisites-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --blisites-transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --blisites-transition-base: 350ms cubic-bezier(0.16, 1, 0.3, 1);
    --blisites-transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

    --blisites-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --blisites-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
    --blisites-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
    --blisites-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.14), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
    --blisites-shadow-cinematic: 0 30px 60px -15px rgba(0, 0, 0, 0.35);
}

/* Scoped Container Utilities */
#blisites-root .blisites-container {
    width: 100%;
    max-width: var(--blisites-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--blisites-container-padding);
    padding-right: var(--blisites-container-padding);
    box-sizing: border-box;
}

/* Scoped Section Wrapper */
#blisites-root .blisites-section {
    position: relative;
    width: 100%;
    padding-top: var(--blisites-section-gap);
    padding-bottom: var(--blisites-section-gap);
    box-sizing: border-box;
}

/* Scoped Button Defaults */
#blisites-root .blisites-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: calc(var(--blisites-font-base) * 0.9375);
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    padding: calc(0.75rem * var(--blisites-scale, 1)) calc(1.65rem * var(--blisites-scale, 1));
    border-radius: var(--blisites-radius);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--blisites-transition-fast);
    border: 1px solid transparent;
    box-sizing: border-box;
}

#blisites-root .blisites-btn:focus-visible {
    outline: 2px solid var(--blisites-accent);
    outline-offset: 3px;
}

#blisites-root .blisites-btn--primary {
    background-color: var(--blisites-accent);
    color: var(--blisites-accent-contrast);
    border-color: var(--blisites-accent);
    box-shadow: var(--blisites-shadow-sm);
}

#blisites-root .blisites-btn--primary:hover,
#blisites-root .blisites-btn--primary:focus-visible {
    background-color: var(--blisites-accent-hover);
    border-color: var(--blisites-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--blisites-shadow-md);
}

#blisites-root .blisites-btn--secondary {
    background-color: transparent;
    color: var(--blisites-text-primary);
    border-color: var(--blisites-border-color);
}

#blisites-root .blisites-btn--secondary:hover,
#blisites-root .blisites-btn--secondary:focus-visible {
    background-color: var(--blisites-bg-alt);
    border-color: var(--blisites-text-secondary);
    transform: translateY(-1px);
}

/* Ghost wireframe Scaffolding (Editor Preview Only) */
#blisites-root .blisites-scaffolding-box {
    border: 2px dashed #cbd5e1;
    border-radius: var(--blisites-radius);
    padding: calc(2.5rem * var(--blisites-scale, 1));
    text-align: center;
    background-color: #f8fafc;
    color: #64748b;
    margin: calc(1rem * var(--blisites-scale, 1)) 0;
}