/**
 * Design Tokens - Unified Design System
 * 
 * This file contains the core design tokens used across all application areas.
 * Import this file in all layouts to ensure consistent styling.
 * 
 * Brand colors: VSS palette (#1E40AF blue → #0D9488 teal)
 */

/* ========================================================================
   GOOGLE FONTS — DM Sans (easyticket-inspired, closest to Google Sans)
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400;1,9..40,500&display=swap');

/* ========================================================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ======================================================================== */

:root {
    /* ----------------------------------------------------------------
       TYPOGRAPHY
       ---------------------------------------------------------------- */
    --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --font-family-dyslexic: "OpenDyslexic", var(--font-family-base);

    /* Font Sizes - Fluid Scale */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* ----------------------------------------------------------------
       COLOR PALETTE - VSS BRAND
       ---------------------------------------------------------------- */

    /* Primary Colors — Periwinkle */
    --color-primary-50: #f0efff;
    --color-primary-100: #e0dffe;
    --color-primary-200: #c5c2fd;
    --color-primary-300: #a5b4fc;
    --color-primary-400: #8b9bff;
    --color-primary-500: #748efe;
    /* Periwinkle primary */
    --color-primary-600: #5b6bef;
    --color-primary-700: #4655e0;
    --color-primary-800: #3644cc;
    --color-primary-900: #2a36a8;

    /* Secondary Colors (VSS Teal) */
    --color-secondary-50: #f0fdfa;
    --color-secondary-100: #ccfbf1;
    --color-secondary-200: #99f6e4;
    --color-secondary-300: #5eead4;
    --color-secondary-400: #2dd4bf;
    --color-secondary-500: #14b8a6;
    --color-secondary-600: #0d9488;
    /* VSS Secondary */
    --color-secondary-700: #0f766e;
    --color-secondary-800: #115e59;
    --color-secondary-900: #134e4a;

    /* Neutral Colors */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Status Colors */
    --color-success-50: #f0fdf4;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;

    --color-warning-50: #fffbeb;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;

    --color-danger-50: #fef2f2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;

    --color-info-50: #eff6ff;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;

    /* ----------------------------------------------------------------
       SEMANTIC TOKENS
       ---------------------------------------------------------------- */

    /* Brand — Periwinkle accent */
    --brand-primary: var(--color-primary-500);
    --brand-primary-light: var(--color-primary-400);
    --brand-primary-dark: var(--color-primary-600);
    --brand-secondary: var(--color-secondary-600);
    --brand-gradient: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    --brand-gradient-hover: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);

    /* Background — cool gray page */
    --bg-page: #e8ebed;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --bg-muted: #f5f6f8;
    --bg-elevated: #ffffff;

    /* Text */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-400);
    --text-inverse: #ffffff;

    /* Borders */
    --border-color: #ededf0;
    --border-color-strong: #e4e5ea;
    --border-focus: var(--color-primary-500);

    /* ----------------------------------------------------------------
       SPACING
       ---------------------------------------------------------------- */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
    --spacing-24: 6rem;
    /* 96px */

    /* Semantic Spacing */
    --spacing-xs: var(--spacing-2);
    --spacing-sm: var(--spacing-4);
    --spacing-md: var(--spacing-6);
    --spacing-lg: var(--spacing-8);
    --spacing-xl: var(--spacing-12);

    /* ----------------------------------------------------------------
       BORDER RADIUS
       ---------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* ----------------------------------------------------------------
       SHADOWS
       ---------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgba(24,29,42,.04);
    --shadow-sm: 0 2px 8px rgba(24,29,42,.06), 0 0 0 1px rgba(24,29,42,.04);
    --shadow-md: 0 4px 12px rgba(24,29,42,.08), 0 0 0 1px rgba(24,29,42,.04);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Colored Shadows — Periwinkle tint */
    --shadow-primary: 0 4px 14px 0 rgba(116,142,254,.25);
    --shadow-primary-lg: 0 10px 25px -3px rgba(116,142,254,.3);

    /* Focus Ring */
    --ring-offset: 2px;
    --ring-width: 3px;
    --ring-color: rgba(116,142,254,.15);

    /* ----------------------------------------------------------------
       TRANSITIONS & ANIMATIONS
       ---------------------------------------------------------------- */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-normal: all var(--duration-normal) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-default);

    /* ----------------------------------------------------------------
       Z-INDEX SCALE
       ---------------------------------------------------------------- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
}

/* ========================================================================
   UNIFIED CARD SYSTEM
   ======================================================================== */

.ds-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
}

.ds-card:hover {
    box-shadow: var(--shadow-md);
}

.ds-card--elevated {
    box-shadow: var(--shadow-lg);
}

.ds-card--elevated:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.ds-card--glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ds-card--gradient-top {
    position: relative;
}

.ds-card--gradient-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
}

.ds-card__header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.ds-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.ds-card__body {
    padding: var(--spacing-md);
}

.ds-card__footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-muted);
}

/* ========================================================================
   UNIFIED BUTTON SYSTEM
   ======================================================================== */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset) var(--bg-card), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);
}

.ds-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button */
.ds-btn--primary {
    background: var(--brand-gradient);
    color: var(--text-inverse);
    box-shadow: var(--shadow-primary);
}

.ds-btn--primary:hover:not(:disabled) {
    background: var(--brand-gradient-hover);
    box-shadow: var(--shadow-primary-lg);
    transform: translateY(-1px);
}

.ds-btn--primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Secondary Button */
.ds-btn--secondary {
    background: var(--color-gray-800);
    color: var(--text-inverse);
}

.ds-btn--secondary:hover:not(:disabled) {
    background: var(--color-gray-900);
    transform: translateY(-1px);
}

/* Outline Button */
.ds-btn--outline {
    background: transparent;
    border-color: var(--border-color-strong);
    color: var(--text-secondary);
}

.ds-btn--outline:hover:not(:disabled) {
    background: var(--bg-muted);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

/* Outline Primary */
.ds-btn--outline-primary {
    background: transparent;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.ds-btn--outline-primary:hover:not(:disabled) {
    background: var(--color-primary-50);
}

/* Ghost Button */
.ds-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.ds-btn--ghost:hover:not(:disabled) {
    background: var(--bg-muted);
    color: var(--text-primary);
}

/* Danger Button */
.ds-btn--danger {
    background: var(--color-danger-600);
    color: var(--text-inverse);
}

.ds-btn--danger:hover:not(:disabled) {
    background: var(--color-danger-700);
    transform: translateY(-1px);
}

/* Success Button */
.ds-btn--success {
    background: var(--color-success-600);
    color: var(--text-inverse);
}

.ds-btn--success:hover:not(:disabled) {
    background: var(--color-success-700);
    transform: translateY(-1px);
}

/* Light Button (for use on dark/gradient backgrounds) */
.ds-btn--light {
    background: #ffffff;
    color: var(--brand-primary);
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ds-btn--light:hover:not(:disabled) {
    background: #ffffff;
    color: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Outline Light Button (for use on dark/gradient backgrounds) */
.ds-btn--outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.ds-btn--outline-light:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* Button Sizes */
.ds-btn--sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-xs);
}

.ds-btn--lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--text-base);
}

.ds-btn--xl {
    padding: var(--spacing-5) var(--spacing-10);
    font-size: var(--text-lg);
}

/* Full Width */
.ds-btn--full {
    width: 100%;
}

/* ========================================================================
   MICRO-ANIMATIONS
   ======================================================================== */

@keyframes ds-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ds-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ds-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes ds-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes ds-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animation Utilities */
.ds-animate-fade-in {
    animation: ds-fade-in var(--duration-normal) var(--ease-out);
}

.ds-animate-fade-in-up {
    animation: ds-fade-in-up var(--duration-normal) var(--ease-out);
}

.ds-animate-fade-in-down {
    animation: ds-fade-in-down var(--duration-normal) var(--ease-out);
}

.ds-animate-scale-in {
    animation: ds-scale-in var(--duration-normal) var(--ease-out);
}

/* Hover Lift Effect */
.ds-hover-lift {
    transition: transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.ds-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ========================================================================
   GLASSMORPHISM UTILITIES
   ======================================================================== */

.ds-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ds-glass-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-inverse);
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================================================
   VSS ADMIN - DISTINCT BRANDING
   These tokens provide completely separate styling for VSS Admin area
   ======================================================================== */

.vss-theme {
    /* Periwinkle Theme — easyticket-inspired */
    --vss-primary: #748efe;
    --vss-primary-light: #a5b4fc;
    --vss-primary-dark: #5b6bef;
    --vss-accent: #f0efff;
    --vss-accent-dark: #748efe;

    /* VSS Sidebar — white with periwinkle accents */
    --vss-sidebar-bg: #ffffff;
    --vss-sidebar-header-bg: #ffffff;
    --vss-sidebar-text: #181d2a;
    --vss-sidebar-text-hover: #5b6bef;
    --vss-sidebar-active-bg: #748efe;
    --vss-sidebar-hover-bg: #f4f3ff;

    /* VSS Cards */
    --vss-card-bg: #ffffff;
    --vss-card-border: #ededf0;
    --vss-card-shadow: 0 2px 8px rgba(24,29,42,.06), 0 0 0 1px rgba(24,29,42,.04);

    /* VSS Buttons */
    --vss-btn-primary-bg: linear-gradient(135deg, #748efe 0%, #5b6bef 100%);
    --vss-btn-primary-hover: linear-gradient(135deg, #5b6bef 0%, #4655e0 100%);
}

/* VSS Card Variant */
.ds-card--vss {
    background: var(--vss-card-bg, #ffffff);
    border: 1px solid var(--vss-card-border, #BFDBFE);
    box-shadow: var(--vss-card-shadow);
}

.ds-card--vss:hover {
    border-color: var(--vss-accent-dark, #60A5FA);
}

/* VSS Button Variant */
.ds-btn--vss-primary {
    background: var(--vss-btn-primary-bg);
    color: var(--text-inverse);
    box-shadow: 0 4px 6px -1px rgba(30, 64, 175, 0.2);
}

.ds-btn--vss-primary:hover:not(:disabled) {
    background: var(--vss-btn-primary-hover);
    box-shadow: 0 6px 8px -1px rgba(30, 64, 175, 0.3);
    transform: translateY(-1px);
}

/* ========================================================================
   ENHANCED MICRO-ANIMATIONS
   ======================================================================== */

/* Staggered animation delays for lists */
.ds-stagger-1 {
    animation-delay: 50ms;
}

.ds-stagger-2 {
    animation-delay: 100ms;
}

.ds-stagger-3 {
    animation-delay: 150ms;
}

.ds-stagger-4 {
    animation-delay: 200ms;
}

.ds-stagger-5 {
    animation-delay: 250ms;
}

.ds-stagger-6 {
    animation-delay: 300ms;
}

/* Bounce animation for attention */
@keyframes ds-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.ds-animate-bounce {
    animation: ds-bounce 0.5s var(--ease-bounce);
}

/* Subtle glow effect for focus states */
@keyframes ds-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(37, 99, 235, 0.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
    }
}

.ds-animate-glow {
    animation: ds-glow 2s ease-in-out infinite;
}

/* Slide in from left */
@keyframes ds-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ds-animate-slide-in-left {
    animation: ds-slide-in-left var(--duration-normal) var(--ease-out);
}

/* Slide in from right */
@keyframes ds-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ds-animate-slide-in-right {
    animation: ds-slide-in-right var(--duration-normal) var(--ease-out);
}

/* Interactive hover effects */
.ds-hover-glow:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

.ds-hover-scale {
    transition: transform var(--duration-fast) var(--ease-out);
}

.ds-hover-scale:hover {
    transform: scale(1.02);
}

/* Button press effect */
.ds-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/* ========================================================================
   GRADIENT UTILITIES
   ======================================================================== */

.ds-gradient-primary {
    background: var(--brand-gradient);
}

.ds-gradient-primary-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtle gradient overlays */
.ds-gradient-overlay {
    position: relative;
}

.ds-gradient-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* ========================================================================
   GLASSMORPHISM VARIANTS
   ======================================================================== */

.ds-glass-light {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ds-glass-primary {
    background: rgba(37, 99, 235, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.ds-glass-vss {
    background: rgba(147, 197, 253, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ========================================================================
   FORM INPUT ENHANCEMENTS
   ======================================================================== */

.ds-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.ds-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--ring-color);
}

.ds-input::placeholder {
    color: var(--text-muted);
}

.ds-input--error {
    border-color: var(--color-danger-500);
}

.ds-input--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ds-input--success {
    border-color: var(--color-success-500);
}

.ds-input--success:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* ========================================================================
   AXION-INSPIRED EDITORIAL DESIGN SYSTEM
   Bold typography, split layouts, generous whitespace, pill buttons
   ======================================================================== */

/* --- Editorial Typography --- */

.axion-display {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--font-extrabold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.axion-h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-extrabold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.axion-h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--font-bold);
    line-height: 1.15;
    color: var(--text-primary);
}

.axion-body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.axion-body-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* --- Section Label (e.g. /WHY CHOOSE US) --- */

.axion-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: var(--spacing-4);
}

.axion-label::before {
    content: '/';
    margin-right: 0.15em;
}

/* --- Pill Button Variant --- */

.ds-btn--pill {
    border-radius: var(--radius-full);
    padding: var(--spacing-3) var(--spacing-6);
}

.ds-btn--pill.ds-btn--lg {
    padding: var(--spacing-4) var(--spacing-8);
}

.ds-btn--pill.ds-btn--xl {
    padding: var(--spacing-5) var(--spacing-10);
}

/* Dark Pill (Axion-style solid dark button) */
.ds-btn--dark {
    background: var(--color-gray-900);
    color: var(--text-inverse);
    border: 1px solid var(--color-gray-900);
}

.ds-btn--dark:hover:not(:disabled) {
    background: var(--color-gray-800);
    border-color: var(--color-gray-800);
    color: var(--text-inverse);
    transform: translateY(-1px);
}

/* Outlined Dark Pill */
.ds-btn--outline-dark {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--color-gray-300);
}

.ds-btn--outline-dark:hover:not(:disabled) {
    border-color: var(--color-gray-900);
    color: var(--text-primary);
}

/* --- Section Spacing --- */

.axion-section {
    padding: 100px 0;
}

.axion-section-sm {
    padding: 70px 0;
}

@media (max-width: 767.98px) {
    .axion-section {
        padding: 60px 0;
    }
    .axion-section-sm {
        padding: 48px 0;
    }
}

/* --- Split Layout (heading left, text right) --- */

.axion-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

@media (max-width: 991.98px) {
    .axion-split {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
}

/* --- Bento Grid --- */

.axion-bento {
    display: grid;
    gap: var(--spacing-4);
}

.axion-bento--2x3 {
    grid-template-columns: repeat(2, 1fr);
}

.axion-bento--2x3 .axion-bento__item:nth-child(n+3) {
    /* After 2 large items, switch logic handled by card sizing */
}

@media (min-width: 768px) {
    .axion-bento--features {
        grid-template-columns: repeat(3, 1fr);
    }
    .axion-bento--features .axion-bento__item--wide {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .axion-bento--2x3,
    .axion-bento--features {
        grid-template-columns: 1fr;
    }
}

/* Bento Card */
.axion-bento__card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.axion-bento__card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-200);
}

.axion-bento__card--dark {
    background: var(--color-gray-900);
    border-color: var(--color-gray-800);
    color: var(--text-inverse);
}

.axion-bento__card--dark:hover {
    border-color: var(--color-gray-700);
}

/* Headings inside dark cards should use light text */
.axion-bento__card--dark h1,
.axion-bento__card--dark h2,
.axion-bento__card--dark h3,
.axion-bento__card--dark h4,
.axion-bento__card--dark h5,
.axion-bento__card--dark h6 {
    color: var(--text-inverse);
}

.axion-bento__card--accent {
    background: var(--color-primary-50);
    border-color: var(--color-primary-100);
}

/* Icon in bento card */
.axion-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-6);
    background: var(--color-primary-100);
    color: var(--brand-primary);
}

.axion-bento__card--dark .axion-icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-inverse);
}

/* --- Axion Image Block --- */

.axion-img {
    width: 100%;
    border-radius: var(--radius-2xl);
    object-fit: cover;
}

.axion-img--hero {
    height: clamp(300px, 40vw, 500px);
}

/* --- Axion Stats Row --- */

.axion-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
    text-align: center;
}

.axion-stat__number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-extrabold);
    line-height: 1.1;
    color: var(--brand-primary);
}

.axion-stat__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-1);
}

@media (max-width: 767.98px) {
    .axion-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Divider --- */

.axion-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}