/* ============================================
   JUPITER PLANET XXL - DARK GREEN INDUSTRIAL
   Design 5: variables.css
   ============================================ */

:root {
    /* ── Core Colors ── */
    --bg-primary: #0a0f14;
    --bg-secondary: #0d1219;
    --bg-card: #111923;
    --bg-card-hover: #162030;
    --bg-input: #0d1219;

    /* ── Accent Colors ── */
    --accent-primary: #00c853;
    --accent-primary-rgb: 0, 200, 83;
    --accent-secondary: #00897b;
    --accent-secondary-rgb: 0, 137, 123;
    --accent-warning: #ffab00;
    --accent-warning-rgb: 255, 171, 0;
    --accent-danger: #ff1744;

    /* ── Text Colors ── */
    --text-primary: #eceff1;
    --text-body: #b0bec5;
    --text-muted: #607d8b;
    --text-accent: #00c853;
    --text-dark: #0a0f14;

    /* ── Border Colors ── */
    --border-card: rgba(0, 200, 83, 0.15);
    --border-accent: rgba(0, 200, 83, 0.4);
    --border-subtle: rgba(176, 190, 197, 0.08);

    /* ── Fonts ── */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Font Weights ── */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Layout ── */
    --container-max: 1280px;
    --container-wide: 1440px;
    --navbar-height: 70px;
    --footer-border: 4px;

    /* ── Grid / Blueprint ── */
    --grid-color: rgba(0, 200, 83, 0.03);
    --grid-size: 40px;
    --grid-dot-color: rgba(0, 200, 83, 0.06);

    /* ── Transitions ── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ── Clip Paths ── */
    --clip-btn: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    --clip-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    --clip-hero: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    --clip-tag: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));

    /* ── Shadows ── */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(0, 200, 83, 0.15);
    --shadow-glow-strong: 0 0 40px rgba(0, 200, 83, 0.25);

    /* ── Z-Index ── */
    --z-navbar: 1000;
    --z-hamburger: 1010;
    --z-overlay: 900;
    --z-modal: 1100;
}