/* ========================================
   AITOLIE - Base Styles
   Variables, Reset, Typography
   ======================================== */

/* ---------- CSS Variables (Design Tokens) ---------- */
:root {
    /* Base Colors */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F9FAFB;
    --color-bg-glass: rgba(255, 255, 255, 0.85);

    /* Text Colors */
    --color-text: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #6B7280;
    --color-white: #FFFFFF;

    /* Accent Colors */
    --color-primary: #1F2937;
    --color-primary-light: #374151;
    --color-accent: #F97316;
    --color-accent-hover: #EA580C;

    /* Gold Palette (High-End) */
    --gold-light: #E8D5A3;
    --gold: #C9A962;
    --gold-dark: #A68B3D;

    /* Text Gold Utility */
    .text-gold {
        background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent !important;
        /* Must be transparent for gradient */
        display: inline-block;
        /* Ensure gradient applies */
    }

    /* Gradients */
    --gradient-main: linear-gradient(135deg, #0044CC 0%, #06B6D4 100%);

    /* Borders */
    --color-border: #E5E7EB;
    --color-border-hover: #D1D5DB;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);

    /* Typography */
    --font-family-base: 'Inter',
    'Noto Sans JP',
    sans-serif;

    /* Spacing */
    --max-width: 1400px;
    --container-padding: 40px;
    --section-padding: 120px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index */
    --z-header: 1000;
    --z-overlay: 2000;
}

/* Responsive Variables */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
        --container-padding: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
        --container-padding: 24px;
        --max-width: 100%;
    }
}

/* Responsive Variables */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
        --container-padding: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
        --container-padding: 24px;
        --max-width: 100%;
    }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    /* Suppress horizontal scroll without creating a scroll container */
}

body {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #e5e7eb;
    background-color: #000000;
    width: 100%;
}

body.loading-active {
    overflow: hidden;
}

/* 3D Canvas Container - Must not affect layout */
#hero-3d-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* Changed from 100vw to prevent scrollbar jump */
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
    flex: none !important;
}

/* ---------- Container ---------- */
.container {
    max-width: var(--max-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--container-padding);
    width: 100%;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
}

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

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
}