/* ===========================================================
   CENTURION
   Design System
   Variables
   =========================================================== */

:root {

    /* =======================================================
       COLORS
    ======================================================= */

    /* Background */
    --color-bg: #090909;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #181818;
    --color-bg-card: #141414;
    --color-bg-glass: rgba(255,255,255,.03);

    /* Borders */
    --color-border: #262626;
    --color-border-light: #343434;

    /* Text */
    --color-text: #F5F5F5;
    --color-text-secondary: #C6C6C6;
    --color-text-muted: #8A8A8A;

    /* Brand */
    --color-gold: #C8A45A;
    --color-gold-light: #E6CB91;
    --color-gold-dark: #A57B35;

    /* Financial Colors */
    --color-buy: #00C853;
    --color-sell: #F44336;
    --color-neutral: #8D8D8D;



    /* =======================================================
       GRADIENTS
    ======================================================= */

    --gradient-gold:
        linear-gradient(
            135deg,
            #A57B35 0%,
            #C8A45A 45%,
            #E6CB91 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            #171717 0%,
            #090909 100%
        );

    --gradient-hero:
        radial-gradient(
            circle at top,
            #1C1C1C 0%,
            #090909 70%
        );

    /* =======================================================
       TYPOGRAPHY
    ======================================================= */

    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4rem;
    --font-size-5xl: 5rem;

    /* =======================================================
       FONT WEIGHT
    ======================================================= */

    --fw-light:300;
    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:800;

    /* =======================================================
       SPACING
    ======================================================= */

    --space-xs:4px;
    --space-sm:8px;
    --space-md:16px;
    --space-lg:24px;
    --space-xl:32px;
    --space-2xl:48px;
    --space-3xl:64px;
    --space-4xl:80px;
    --space-5xl:128px;

    /* =======================================================
       BORDER RADIUS
    ======================================================= */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill:999px;

    /* =======================================================
       SHADOWS
    ======================================================= */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.15);

    --shadow-md:
        0 12px 40px rgba(0,0,0,.30);

    --shadow-lg:
        0 25px 80px rgba(0,0,0,.45);

    --shadow-gold:
        0 0 35px rgba(200,164,90,.15);

    /* =======================================================
       TRANSITIONS
    ======================================================= */

    --transition-fast:.2s ease;
    --transition:.35s ease;
    --transition-slow:.6s ease;

    /* =======================================================
       WIDTH
    ======================================================= */

    --container:1280px;
    --container-wide:1440px;

    /* =======================================================
       HEADER
    ======================================================= */

    --header-height:90px;

    /* =======================================================
       COMPONENTS
    ======================================================= */

    /* Navbar */

    --navbar-height: 84px;
    --navbar-height-scroll: 72px;

    /* Hero */

    --hero-min-height: 100vh;
    --hero-title-width: 12ch;
    --hero-content-width: 640px;

    /* Buttons */

    --button-height: 56px;
    --button-padding-x: 32px;

    /* Cards */

    --card-padding: 32px;
    --card-gap: 24px;

    /* Effects */

    --blur-glass: 18px;
    --glow-size: 720px;

    /* Z-Index */

    --z-background: -1;
    --z-default: 1;
    --z-navbar: 1000;
    --z-modal: 5000;
    --z-toast: 9999;
}