/*
 * Kanna.Sdk.UI — Shared Stylesheet
 *
 * Import this single file in consuming apps:
 *   <link href="_content/Kanna.Sdk.UI/shared/shared.css" rel="stylesheet" />
 *
 * To switch themes, also include the desired theme file, e.g.:
 *   <link href="_content/Kanna.Sdk.UI/shared/themes/neon-pink.css" rel="stylesheet" />
 */

/* ── Custom font ──────────────────────────────── */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('fonts/GoogleSansFlex.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

/* Base variables (defaults) */
@import url('themes/_base.css');

/* Active theme — swap this import to change the default theme */
@import url('themes/neon-pink.css');

/* ── Global resets & base styles ────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: var(--k-font-family);
    font-size: var(--k-font-size-base);
    color: var(--k-fg);
    background-color: var(--k-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Google Sans Flex', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.k-btn-primary {
    background-color: var(--k-primary);
    color: var(--k-primary-fg);
    border: none;
    padding: var(--k-space-md) var(--k-space-xl);
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: all var(--k-transition-base);
    font-family: var(--k-font-family);
    box-shadow: var(--k-shadow-glow);
}

.k-btn-primary:hover {
    background-color: var(--k-primary-hover);
    box-shadow: var(--k-shadow-glow-hover);
    transform: translateY(-2px);
}

.k-btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--k-shadow-sm);
    filter: brightness(0.85);
}

.k-btn-secondary {
    background-color: transparent;
    color: var(--k-primary);
    border: 2px solid var(--k-primary);
    padding: var(--k-space-md) var(--k-space-xl);
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: all var(--k-transition-base);
    font-family: var(--k-font-family);
}

.k-btn-secondary:hover {
    background-color: rgba(255, 0, 255, 0.1);
    color: var(--k-primary-hover);
    box-shadow: var(--k-shadow-glow);
}

.k-btn-secondary:active {
    transform: translateY(1px);
    background-color: rgba(255, 0, 255, 0.15);
    filter: brightness(0.85);
}

.k-btn-danger {
    background-color: var(--k-danger);
    color: var(--k-danger-fg);
    border: none;
    padding: var(--k-space-md) var(--k-space-xl);
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: all var(--k-transition-base);
    font-family: var(--k-font-family);
    box-shadow: 0 4px 10px rgba(255, 77, 106, 0.3);
}

.k-btn-danger:hover {
    background-color: var(--k-danger-hover);
    box-shadow: 0 6px 15px rgba(255, 77, 106, 0.5);
    transform: translateY(-2px);
}

.k-btn-danger:active {
    transform: translateY(1px);
    box-shadow: var(--k-shadow-sm);
    filter: brightness(0.85);
}

.k-btn-info {
    background-color: var(--k-info);
    color: var(--k-info-fg);
    border: none;
    padding: var(--k-space-md) var(--k-space-xl);
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: all var(--k-transition-base);
    font-family: var(--k-font-family);
    box-shadow: 0 4px 10px rgba(41, 182, 246, 0.3);
}

.k-btn-info:hover {
    background-color: var(--k-info-hover);
    box-shadow: 0 6px 15px rgba(41, 182, 246, 0.5);
    transform: translateY(-2px);
}

.k-btn-info:active {
    transform: translateY(1px);
    box-shadow: var(--k-shadow-sm);
    filter: brightness(0.85);
}

/* ── Button loading state ───────────────────────── */

@keyframes k-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes k-glow-pulse-primary {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 0, 255, 0.5), 0 0 16px rgba(255, 0, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(255, 0, 255, 0.7), 0 0 32px rgba(255, 0, 255, 0.5);
    }
}

@keyframes k-glow-pulse-danger {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 77, 106, 0.5), 0 0 16px rgba(255, 77, 106, 0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(255, 77, 106, 0.7), 0 0 32px rgba(255, 77, 106, 0.5);
    }
}

@keyframes k-glow-pulse-info {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(41, 182, 246, 0.5), 0 0 16px rgba(41, 182, 246, 0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(41, 182, 246, 0.7), 0 0 32px rgba(41, 182, 246, 0.5);
    }
}

@keyframes k-glow-pulse-secondary {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 0, 255, 0.4), 0 0 16px rgba(255, 0, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(255, 0, 255, 0.6), 0 0 32px rgba(255, 0, 255, 0.4);
    }
}

/* ── PulseCircle ────────────────────────────────── */

.k-pulse-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 280px;
}

.k-pulse-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    border-radius: var(--k-radius-full);
    background: var(--k-bg);
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.08),
        -8px -8px 20px rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 1;
}

.k-pulse-letter {
    font-family: var(--k-font-family);
    font-size: 5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--k-primary), var(--k-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

.k-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--k-radius-full);
    border: 2px solid var(--k-primary);
    opacity: 0;
    animation: k-pulse-expand 3s ease-out infinite;
}

@keyframes k-pulse-expand {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 0;
    }
}

.highlight {
    background: var(--gradient-primary-120, linear-gradient(120deg, #1a1a1a, #4a4a4a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    filter: var(--drop-shadow-glow, drop-shadow(0 0 2px rgba(0, 0, 0, 0.15)));
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto 4rem auto;
    line-height: 1.6;
}