/*
 * Kanna.Sdk.UI — Base Theme
 * Defines all CSS custom properties with sensible defaults.
 * Individual themes override these variables on :root or [data-theme].
 */

:root {
    /* ── Colors ─────────────────────────────────── */
    --k-primary:          #ff00ff;
    --k-primary-hover:    #d900d9;
    --k-primary-fg:       #ffffff;

    --k-secondary:        #6c757d;
    --k-secondary-hover:  #565e64;
    --k-secondary-fg:     #ffffff;

    --k-accent:           #ff00ff;

    --k-bg:               #f5f5f5;
    --k-bg-surface:       #f5f5f5;
    --k-bg-elevated:      #eeeeee;

    --k-fg:               var(--k-primary);
    --k-fg-muted:         #666666;

    --k-border:           #2e2e4a;
    --k-border-focus:     var(--k-primary);

    --k-danger:           #ff4d6a;
    --k-danger-hover:     #e0435d;
    --k-danger-fg:        #ffffff;

    --k-success:          #00e676;
    --k-success-hover:    #00c966;
    --k-success-fg:       #ffffff;

    --k-warning:          #ffab00;
    --k-warning-hover:    #e09900;
    --k-warning-fg:       #1a1a1a;

    --k-info:             #29b6f6;
    --k-info-hover:       #0299e0;
    --k-info-fg:          #ffffff;
    --k-background-color: ##f6f6f6;

    /* ── Typography ─────────────────────────────── */
    --k-font-family:      'Google Sans Flex', sans-serif;
    --k-font-size-xs:     0.75rem;
    --k-font-size-sm:     0.875rem;
    --k-font-size-base:   1rem;
    --k-font-size-lg:     1.125rem;
    --k-font-size-xl:     1.25rem;
    --k-font-weight-normal: 400;
    --k-font-weight-medium: 500;
    --k-font-weight-bold:   700;

    /* ── Spacing ────────────────────────────────── */
    --k-space-xs:         0.25rem;
    --k-space-sm:         0.5rem;
    --k-space-md:         0.75rem;
    --k-space-lg:         1rem;
    --k-space-xl:         1.5rem;
    --k-space-2xl:        2rem;

    /* ── Borders & Radius ───────────────────────── */
    --k-radius-sm:        4px;
    --k-radius-md:        6px;
    --k-radius-lg:        10px;
    --k-radius-xl:        20px;
    --k-radius-full:      9999px;

    /* ── Shadows ────────────────────────────────── */
    --k-shadow-sm:        0 2px 6px  rgba(0, 0, 0, 0.3);
    --k-shadow-md:        0 4px 10px rgba(0, 0, 0, 0.4);
    --k-shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.5);
    --k-shadow-glow:      0 4px 10px rgba(255, 0, 255, 0.3);
    --k-shadow-glow-hover:0 6px 15px rgba(255, 0, 255, 0.5);

    /* ── Transitions ────────────────────────────── */
    --k-transition-fast:  0.15s ease;
    --k-transition-base:  0.2s ease;
    --k-transition-slow:  0.35s ease;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Google Sans Flex', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--k-background-color);
}