/**
 * 0racle Design Tokens (ODS)
 * Primitive, semantic, and component-level tokens for 0racle.
 */

:root {
    /* -------------------------------------------------------------------------
     * 1. Primitives: Colors
     * ---------------------------------------------------------------------- */
    --color-space-950: #080a10;
    --color-space-900: #0b0d12;
    --color-space-850: #0f121a;
    --color-space-800: #11141c;
    --color-space-750: #141822;
    --color-space-700: #151926;
    --color-space-650: #181d2c;
    --color-space-600: #1a1f30;
    --color-space-550: #20263a;

    --color-cosmic-400: #7c9cff;
    --color-cosmic-500: #6082f0;
    --color-cosmic-glow: rgba(124, 156, 255, 0.16);
    --color-cosmic-border: rgba(124, 156, 255, 0.22);
    --color-cosmic-soft: rgba(124, 156, 255, 0.14);

    --color-astral-400: #9f7cff;
    --color-astral-500: #8862f5;
    --color-astral-soft: rgba(159, 124, 255, 0.14);

    --color-aurora-400: #34d399;
    --color-aurora-500: #10b981;
    --color-aurora-soft: rgba(52, 211, 153, 0.14);

    --color-solar-400: #f59e0b;
    --color-solar-500: #d97706;
    --color-solar-soft: rgba(245, 158, 11, 0.14);

    --color-good: #5fd39a;
    --color-warn: #f2b866;
    --color-bad: #ff7a7a;

    --color-text-100: #f4f6fc;
    --color-text-200: #e8ebf4;
    --color-text-300: #b8c0d9;
    --color-text-400: #9aa3bd;
    --color-text-500: #8b91a8;

    /* -------------------------------------------------------------------------
     * 2. Semantic Mappings
     * ---------------------------------------------------------------------- */
    --bg: var(--color-space-900);
    --bg-soft: var(--color-space-800);
    --card: var(--color-space-700);
    --card-2: var(--color-space-600);
    --border: #262c3f;
    --border-soft: #1f2434;

    --fg: var(--color-text-200);
    --fg-muted: var(--color-text-400);
    --fg-faint: var(--color-text-500);

    --accent: var(--color-cosmic-400);
    --accent-2: var(--color-astral-400);
    --accent-soft: var(--color-cosmic-soft);

    --good: var(--color-good);
    --warn: var(--color-warn);
    --bad: var(--color-bad);

    /* -------------------------------------------------------------------------
     * 3. Glassmorphic Surface Tokens
     * ---------------------------------------------------------------------- */
    --surface-glass-bg: rgba(18, 22, 34, 0.78);
    --surface-glass-border: rgba(124, 156, 255, 0.18);
    --surface-glass-blur: blur(24px) saturate(140%);
    --surface-glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --card-pad: 32px;
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --radius-full: 999px;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

    /* -------------------------------------------------------------------------
     * Spacing Scale Tokens
     * ---------------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* -------------------------------------------------------------------------
     * 4. Typography Scale
     * ---------------------------------------------------------------------- */
    --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-display-size: 44px;
    --text-display-weight: 700;
    --text-display-tracking: 0.06em;

    --text-h2-size: 26px;
    --text-h2-weight: 600;
    --text-h2-tracking: -0.01em;

    --text-h3-size: 15px;
    --text-h3-weight: 600;

    --text-body-size: 15px;
    --text-sm-size: 13px;
    --text-xs-size: 12px;

    /* -------------------------------------------------------------------------
     * 5. Motion & Spatial Parallax
     * ---------------------------------------------------------------------- */
    --motion-fast: 0.15s ease;
    --motion-base: 0.25s ease;
    --motion-slow: 0.4s ease;
    --motion-atmo: 0.8s ease;

    --current-bg: url('/assets/images/bg_mystic_nebula.webp');
    --current-mid: url('/assets/images/px_mid_astrolabe.webp');
    --current-fore: url('/assets/images/px_fore_orbs.webp');
    --px-x: 0;
    --px-y: 0;

    /* -------------------------------------------------------------------------
     * 6. Z-Index Layering
     * ---------------------------------------------------------------------- */
    --z-backdrop: -1;
    --z-canvas: 1;
    --z-content: 10;
    --z-dropdown: 20;
    --z-modal: 50;
}