/* * Variables & Common Values
 * -------------------------------------------------- */
:root {
    /* Brand Colors */
    --color-primary: #0F2540;   /* Deep Navy - Text & Main */
    --color-accent-a: #8C3F54;  /* Maroon - Sub Accent */
    --color-accent-b: #D95638;  /* Terracotta - CTA (Passion) */
    --color-accent-c: #F2B705;  /* Mustard - Decoration (Creativity) */
    
    /* Backgrounds */
    --color-bg: #F9F8F6;        /* Warm Ivory */
    --color-surface: #FFFFFF;   /* White */
    
    /* Typography */
    --font-ja: "Noto Sans JP", sans-serif;
    --font-en: "Montserrat", sans-serif;
    
    /* Spacing & Layout */
    --header-height: 80px;
    --container-width: 1200px;
    --border-radius-pill: 30px;
    
    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-smooth: 0.8s ease;
    --transition-slow: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-header: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-button: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Shadows */
    --shadow-sm: 0 2px 12px rgba(15, 37, 64, 0.06), 0 8px 24px rgba(15, 37, 64, 0.04);
    --shadow-md: 0 4px 20px rgba(15, 37, 64, 0.1);
    --shadow-lg: 0 8px 30px rgba(217, 86, 56, 0.15);
    --shadow-button: 0 4px 15px rgba(217, 86, 56, 0.3);
    --shadow-button-hover: 0 8px 25px rgba(217, 86, 56, 0.4);
    --shadow-header: 0 2px 20px rgba(15, 37, 64, 0.05);
    
    /* Opacity */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.7;
    
    /* Z-index */
    --z-loading: 9999;
    --z-mobile-menu: 9998;
    --z-header: 1000;
    --z-hero-content: 10;
}

@media (max-width: 960px) {
    :root {
        --container-width: 100%;
    }
}