/* ==========================================================================
   klic.in Enterprise Marketing Framework — Design System Tokens v1.0
   ========================================================================== */

:root {
    /* ─── Typography Tokens (Premium Scale) ──────────────────────────────── */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-hero: 4rem;              /* 64px Desktop Hero Title */
    --font-subtitle: 1.375rem;      /* 22px Hero Subtitle */
    --font-h2: 2.625rem;            /* 42px Section Headings */
    --font-h3: 1.5rem;              /* 24px Card Headings */
    --font-body-text: 1.125rem;     /* 18px Body Copy */

    /* ─── Layout & Container Bounds ────────────────────────────────────── */
    --container-max: 1240px;
    --content-max: 840px;
    --section-gap: 160px;           /* Increased whitespace for luxury feel */
    --grid-gap: 2.5rem;
    --header-height: 80px;
    --z-header: 100;
    --z-modal: 1000;

    /* ─── Color Palette (Adapts dynamically to parent theme) ─────────────── */
    --color-background: var(--bg-primary, #09090b);
    --color-surface: var(--bg-secondary, #111827);
    --color-surface-hover: var(--bg-card-hover, #1f2937);
    --color-border: var(--glass-border, #27272a);
    --color-border-subtle: var(--bg-card-border, rgba(255, 255, 255, 0.08));

    /* Text Colors */
    --color-text-primary: var(--text-primary, #f9fafb);
    --color-text-secondary: var(--text-secondary, #9ca3af);
    --color-text-muted: var(--text-muted, #6b7280);

    /* Accent & Semantic Brand Colors */
    --color-accent: var(--text-accent, #6366f1);         /* Dynamic Accent */
    --color-accent-hover: var(--text-accent, #4f46e5);
    --color-secondary: var(--text-accent, #a855f7);      /* Dynamic Secondary */
    --color-success: #22c55e;        /* Green */
    --color-warning: #f59e0b;        /* Amber */
    --color-danger: #ef4444;         /* Red */
    --color-highlight: #ec4899;      /* Pink */

    /* Gradients */
    --gradient-accent: var(--gradient-primary, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    --gradient-glow: radial-gradient(circle at center, rgba(99, 102, 241, 0.25) 0%, transparent 70%);

    /* ─── Spacing Tokens ───────────────────────────────────────────────── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6rem;

    /* ─── Border Radius ────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ─── Elevation & Shadows ─────────────────────────────────────────── */
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-floating: 0 25px 60px -15px rgba(99, 102, 241, 0.25);
    --shadow-glow: 0 0 50px rgba(99, 102, 241, 0.3);
}

@keyframes m-float-slow {
    0%, 100% { transform: translateY(0px) rotate(-1deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes m-pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.08); }
}