@charset "utf-8";

/* ========================================================================
   GLOBAL DESIGN TOKENS
   Theme based on the supplied dark navy / violet / pink visual direction.
   ======================================================================== */

:root {
    /* Colours */
    --color-bg: #080f19;
    --color-bg-deep: #020513;
    --color-surface: #11182a;
    --color-surface-soft: #171a2b;
    --color-surface-dark: #0f172a;

    --color-white: #ffffff;
    --color-text: #f4f5f8;
    --color-text-light: #e5e7eb;
    --color-text-muted: #aeb7c7;
    --color-text-subtle: #7f8aa0;
    --color-black: #05070c;

    --color-purple: #5a4dde;
    --color-purple-deep: #2d2b55;
    --color-violet: #8f32c4;
    --color-pink: #ff5fa2;
    --color-pink-soft: #ff80b2;

    --color-border: rgba(229, 231, 235, 0.14);
    --color-border-strong: rgba(229, 231, 235, 0.22);

    /* Gradients */
    --gradient-page: linear-gradient(135deg, #080f19 0%, #0b1221 48%, #14122c 100%);
    --gradient-panel: linear-gradient(145deg, rgba(18, 26, 43, 0.96), rgba(10, 16, 31, 0.88));
    --gradient-cta: linear-gradient(100deg, #4f35d8 0%, #7a26bf 48%, #ff5fa2 100%);
    --gradient-accent: linear-gradient(100deg, #4f35d8 0%, #bb3cc1 55%, #ff80b2 100%);
    --gradient-text: linear-gradient(100deg, #8f73ff 0%, #ff5fa2 100%);

    /* Glow / shadows */
    --glow-purple: 0 0 30px rgba(90, 77, 222, 0.2);
    --glow-pink: 0 0 34px rgba(255, 95, 162, 0.14);
    --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 12px 28px rgba(93, 47, 197, 0.28);

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-pill: 999px;

    /* Typography */
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 15px;
    --line-height-base: 1.6;

    /* Motion */
    --transition-fast: 180ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body,
input,
textarea,
select,
button {
    font-family: var(--font-family-base);
}

body,
input,
textarea,
select {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin-top: 0;
    color: var(--color-text-light);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--color-white);
    font-family: var(--font-family-heading);
}

h1,
h2,
h3 {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.42em !important;
}

h4,
h5,
h6 {
    font-size: 2.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

ul,
ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: rgba(90, 77, 222, 0.45);
    color: var(--color-white);
}

.clear {
    clear: both;
}

.hidden {
    display: none;
}