/*--------------------------------------------------------------
# CSS Variables - Color Palette & Design System
# Based on reference site: muse-1.net (WHITE background + GOLD theme)
--------------------------------------------------------------*/

:root {
    /* === Primary Colors === */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* === Brand Colors (exact colors from muse-1.net) === */
    --color-primary-gold: #f283ae;         /* Main Gold - exact from muse-1.net */
    --color-secondary-gold: #fed05d;       /* Secondary Gold - exact from muse-1.net */
    --color-deep-gold: #fd68a4;            /* Darker variant */
    --color-light-gold: #FFF8DC;           /* Cornsilk */
    --color-accent-red: #be0000;           /* Red accent - exact from muse-1.net */
    --color-champagne: #F7E7CE;            /* Champagne */
    
    --color-primary-pink: #f482c9;
    --color-primary-pink-strong: #f482c9;


    /* === Neutral Colors === */
    --color-gray-darkest: #2c2c2c;         /* Dark text */
    --color-gray-dark: #444444;            /* Secondary text */
    --color-gray-medium: #666666;          /* Muted text */
    --color-gray-light: #999999;           /* Light text */
    --color-gray-lighter: #cccccc;         /* Border colors */
    --color-gray-lightest: #f5f5f5;        /* Section backgrounds */
    
    /* === Background Colors === */
    --bg-primary: var(--color-white);      /* Main white background */
    --bg-secondary: var(--color-light-gold); /* Light gold sections */
    --bg-tertiary: var(--color-champagne); /* Champagne sections */
    --bg-accent: var(--color-gray-lightest); /* Light gray sections */
    --bg-pink-light: #fff6fb;
    
    /* === Text Colors === */
    --text-primary: var(--color-black);           /* Main text - black like muse-1.net */
    --text-secondary: var(--color-gray-dark);     /* Secondary text */
    --text-muted: var(--color-gray-medium);       /* Muted text */
    --text-accent: var(--color-primary-gold);     /* Gold accent text */
    --text-highlight: var(--color-secondary-gold); /* Secondary gold highlights */
    
    /* === Gradients (based on muse-1.net patterns) === */
    --gradient-primary: linear-gradient(to right, #ffffff 0%, #b49c47 50%, #ffffff 100%); 
    --gradient-gold: linear-gradient(45deg, var(--color-secondary-gold), var(--color-deep-gold));
    --gradient-light: linear-gradient(135deg, var(--color-white), var(--color-light-gold));
    --gradient-overlay: linear-gradient(rgba(212, 178, 75, 0.1), rgba(212, 178, 75, 0.1));
    --gradient-sakura: linear-gradient(135deg, #ff95f4, #f4e8c1);
    
    /* === Shadow & Effects === */
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.4);
    --shadow-glow-warm: 0 0 20px rgba(218, 165, 32, 0.3);
    
    /* === Typography (using serif like muse-1.net) === */
    /* --font-family-primary: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
    --font-family-primary: "Hachi Maru Pop" , "Kosugi Maru", sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* === Font Sizes === */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.5rem;    /* 56px */
    
    /* === Spacing Scale === */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    
    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-full: 50%;
    
    /* === Transitions === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* === Breakpoints === */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1400px;
    
    /* === Z-Index Scale === */
    --z-negative: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-overlay: 100;
    --z-modal: 1000;
    --z-notification: 1100;
    --z-tooltip: 1200;
}