/* ==========================================
   THEME
========================================== */

:root {

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

    --color-background: #000000;
    --color-surface: #101010;
    --color-surface-light: #1A1A1A;

    --color-text: #FFFFFF;
    --color-text-secondary: #B8B8B8;

    --color-primary: #FFFFFF;
    --color-border: rgba(255,255,255,.10);

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

    --font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-family-display:
        Georgia,
        "Times New Roman",
        serif;

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

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 48px;
    --space-xxl: 80px;

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

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --radius-round: 50%;

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

    --shadow-soft:
        0 10px 30px rgba(0,0,0,.35);

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

    --transition-fast: .20s;
    --transition-normal: .35s;
    --transition-slow: .60s;
    --transition-ambient: 4s;
    --typewriter-character-delay: 48ms;
    --zodiac-story-scroll-duration: 1600ms;
    --zodiac-story-scroll-offset-ratio: .2;
    --viewer-scroll-duration: 1800ms;
    --viewer-scroll-offset-ratio: .04;

    /* ======================================
       3D VIEWER
    ====================================== */

    --viewer-stage-background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035) 34%,
            rgba(255,255,255,0) 68%
        );
    --viewer-stage-overlay:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.025),
            rgba(255,255,255,0) 24%,
            rgba(0,0,0,.32)
        );
    --viewer-control-background: rgba(8,8,8,.72);
    --viewer-control-background-active: rgba(255,255,255,.14);
    --viewer-configurator-background: rgba(9,9,9,.96);
    --viewer-configurator-backdrop: rgba(0,0,0,.58);
    --viewer-configurator-option-background: rgba(255,255,255,.035);
    --viewer-configurator-option-active: rgba(255,255,255,.12);
    --viewer-configurator-shadow:
        -24px 0 70px rgba(0,0,0,.58);
    --viewer-configurator-mobile-shadow:
        0 -24px 70px rgba(0,0,0,.58);
    --viewer-preview-model-color: #C8CBD0;
    --viewer-preview-model-metalness: .78;
    --viewer-preview-model-roughness: .24;
    --viewer-loading-duration: 1s;

}