:root {
    /* Brand gradient */
    --grad-start: #AF78F4;
    --grad-mid1: #A38AEB;
    --grad-mid2: #95BDEF;
    --grad-end: #2EC7E6;
    --gradient-brand: linear-gradient(90deg, var(--grad-start) 0%, var(--grad-mid1) 35%, var(--grad-mid2) 70%, var(--grad-end) 100%);
    --gradient-heading: linear-gradient(180deg, #FFFFFF 20%, #666666 100%);

    /* ManageİQ */

    --line: #1E293B;
    --line-soft: #E2E8F0;
    --muted: #94A3B8;
    --muted-dark: #64748B;
    --display: 'Outfit', sans-serif;

    /* İcons */

    --icon-start: #b078f4d3;
    --icon-mid1: #A38AEB;
    --icon-mid2: #95BDEF;
    --icon-end: #2EC7E6;
    --icons-brand: linear-gradient(180deg, var(--icon-mid2) 0%, var(--icon-start) 95%);

    /* Surfaces */
    --color-bg: #000000;
    --color-surface: #0D0D10;
    --color-surface-alt: #131318;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-soft: rgba(255, 255, 255, 0.08);

    /* Text */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #D1D1D1;
    --color-text-muted: #888888;
    --color-text-faint: #555555;

    /* Accent */
    --color-accent: #A38AEB;
    --color-accent-soft: rgba(163, 138, 235, 0.4);
    --color-accent-glow: rgba(91, 168, 224, 0.3);

    /* Radius / spacing / shadow / motion */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-glow: 0 0 30px var(--color-accent-soft);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.35);
    --transition-fast: 180ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Type */
    --font-display: "Space Grotesk", "Helvetica Neue", "Arial", sans-serif;
    --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;

    /* Spacing scale */
    --section-padding: 120px;
    --section-padding-sm: 70px;
}