/* ============================================================
   SKIN 1: THE LUXURY BUTIK (Mewah, Elegan)
   ============================================================ */
.skin-luxury {
    /* Identitas Utama */
    --primary-color: #083b50;       /* Navy Utama */
    --primary-hover: #052634;       /* Navy Gelap (untuk teks/link) */
    --accent-color: #a58d67;        /* Gold (Aksen Utama) */
    --accent-hover: #8e7856;        /* Gold Gelap (untuk hover button) */
    
    /* Background & Text */
    --bg-color: #ffffff;            
    --bg-light: #f9f6f2;            /* Cream mewah untuk background sekunder */
    --text-color: #1a1a1a;          /* Teks Utama */
    --text-muted: #718096;          /* Teks Abu-abu Luxury */
    --white: #ffffff;
    
    /* Tipografi & Karakter */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --border-radius: 0px;           /* Sudut tajam khas brand premium */
    --card-shadow: 0 4px 20px rgba(8, 59, 80, 0.08); 
    --btn-text-transform: uppercase;
    
    /* Header & Footer */
    --header-bg: #083b50;           
    --header-text: #ffffff;         
    --footer-bg: #083b50;           
    --footer-text: #E5E1DD;         
    
    /* UI Elements */
    --border-color: #eeeeee;

    /* Product Card */
    --card-aspect-ratio: 3 / 4; /* Tetap Portrait */

    /* MD3 Mapping */
    --md-sys-color-primary: var(--primary-color);
    --md-sys-color-on-primary: var(--white);
    --md-sys-color-surface: var(--bg-color);
    --md-sys-color-on-surface: var(--text-color);
    --md-sys-color-surface-container: var(--bg-light); /* Navigasi bawah mengikuti bg-light skin */
    --md-sys-color-primary-container: var(--accent-color);
    --md-sys-color-on-primary-container: var(--primary-color);

    /* MD3 Mapping Radius */
    --md-radius-small: var(--border-radius);
    --md-radius-medium: var(--border-radius);
    --md-radius-large: var(--border-radius);
    --md-radius-extra-large: var(--border-radius); /* Luxury tetap tajam */

}

/* ============================================================
   SKIN 2: THE CHEERFUL PLAYFUL (Pink & Soft Blue)
   ============================================================ */
.skin-playful {
    /* Identitas Warna */
    --primary-color: #ff8da1;       /* Pink ceria */
    --primary-hover: #ff6b84;       /* Pink sedikit lebih gelap */
    --accent-color: #72ddf7;        /* Biru muda (Soft Blue) */
    --accent-hover: #58cce9;        /* Biru muda lebih tegas */
    
    /* Background & Text */
    --bg-color: #fff9fa;            /* Rona merah muda sangat pucat */
    --bg-light: #ffffff;
    --text-color: #4a4a4a;          /* Abu-abu lembut agar tidak kaku */
    --text-muted: #9b9b9b;
    --white: #ffffff;
    
    /* Karakter Desain */
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Nunito', sans-serif;
    --border-radius: 25px;           /* Sangat bulat & ramah */
    --card-shadow: 0 10px 25px rgba(255, 141, 161, 0.15);
    --btn-text-transform: none;      /* Santai, tidak kaku */

    /* Header & Navigasi */
    --header-bg: #ffffff;
    --header-text: #ff8da1;
    
    /* Footer */
    --footer-bg: #ff8da1;
    --footer-text: #ffffff;
    
    /* UI Elements */
    --border-color: #ffd1dc;

    /* Product Card */
    --card-aspect-ratio: 3 / 4; /* Tetap Portrait */

    /* MD3 Mapping */
    --md-sys-color-primary: var(--primary-color);
    --md-sys-color-on-primary: var(--white);
    --md-sys-color-surface: var(--bg-color);
    --md-sys-color-on-surface: var(--text-color);
    --md-sys-color-surface-container: var(--bg-light); /* Navigasi bawah mengikuti bg-light skin */
    --md-sys-color-primary-container: var(--accent-color);
    --md-sys-color-on-primary-container: var(--primary-color);

    /* MD3 Mapping Radius */
    --md-radius-small: var(--border-radius);
    --md-radius-medium: var(--border-radius);
    --md-radius-large: var(--border-radius);
    --md-radius-extra-large: var(--border-radius); /* Luxury tetap tajam */

}

/* ============================================================
   SKIN 3: THE NEW MODERN (Dusty Blue & Terracotta)
   ============================================================ */
.skin-modern {
    /* Identitas Warna Baru */
    --primary-color: #5B6D92;       /* Dusty Blue */
    --primary-hover: #4a5a7a;       /* Dusty Blue Deep */
    --accent-color: #d18266;        /* Terracotta (CTA/Aksen) */
    --accent-hover: #b96b4f;        /* Terracotta Deep */
    
    /* Background & Text */
    --bg-color: #ffffff;            
    --bg-light: #f7f9fa;            /* Background abu kebiruan sangat muda */
    --text-color: #364042;          /* Slate Grey */
    --text-muted: #7f8c8d;
    --white: #ffffff;
    
    /* Karakter Desain */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --border-radius: 12px;           /* Modern rounded corners */
    --card-shadow: 0 4px 15px rgba(54, 64, 66, 0.08); 
    --btn-text-transform: none;

    /* Header & Navigasi */
    --header-bg: #f7f9fa;
    --header-text: #364042;
    
    /* Footer */
    --footer-bg: #f7f9fa;           
    --footer-text: #364042;
    
    /* UI Elements */
    --border-color: rgba(54, 64, 66, 0.1);

    /* Product Card */
    --card-aspect-ratio: 1 / 1;

    /* MD3 Mapping */
    --md-sys-color-primary: var(--primary-color);
    --md-sys-color-on-primary: var(--white);
    --md-sys-color-surface: var(--bg-color);
    --md-sys-color-on-surface: var(--text-color);
    --md-sys-color-surface-container: var(--bg-light); /* Navigasi bawah mengikuti bg-light skin */
    --md-sys-color-primary-container: var(--accent-color);
    --md-sys-color-on-primary-container: var(--primary-color);

    /* MD3 Mapping Radius */
    --md-radius-small: var(--border-radius);
    --md-radius-medium: var(--border-radius);
    --md-radius-large: var(--border-radius);
    --md-radius-extra-large: var(--border-radius); /* Luxury tetap tajam */

}

/* ============================================================
   SKIN 4: THE PROFESSIONAL CORPORATE (Biru & Gold)
   ============================================================ */
.skin-corporate {
    /* Warna Identitas */
    --primary-color: #00266f;       /* Deep Blue: Profesional */
    --primary-hover: #001a4d;       /* Navy yang lebih gelap */
    --accent-color: #fe9e01;        /* Vibrant Gold: CTA tegas */
    --accent-hover: #e58e00;        /* Gold yang lebih pekat */
    
    /* Background & Text */
    --bg-color: #f8f9fa;            /* Abu-abu sangat muda */
    --bg-light: #ffffff;
    --text-color: #1a1a1a;          
    --text-muted: #6c757d;
    --white: #ffffff;
    
    /* Karakter Desain */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --border-radius: 4px;           /* Sudut tegas, profesional */
    --card-shadow: 0 5px 15px rgba(0, 38, 111, 0.1);
    --btn-text-transform: uppercase;

    /* Header & Navigasi */
    --header-bg: #00266f;           
    --header-text: #ffffff;         
    
    /* Footer */
    --footer-bg: #001a4d;           
    --footer-text: #ffffff;
    
    /* UI Elements */
    --border-color: #d1d8e0;

    /* Product Card */
    --card-aspect-ratio: 1 / 1;

    /* MD3 Mapping */
    --md-sys-color-primary: var(--primary-color);
    --md-sys-color-on-primary: var(--white);
    --md-sys-color-surface: var(--bg-color);
    --md-sys-color-on-surface: var(--text-color);
    --md-sys-color-surface-container: var(--bg-light); /* Navigasi bawah mengikuti bg-light skin */
    --md-sys-color-primary-container: var(--accent-color);
    --md-sys-color-on-primary-container: var(--primary-color);

    /* MD3 Mapping Radius */
    --md-radius-small: var(--border-radius);
    --md-radius-medium: var(--border-radius);
    --md-radius-large: var(--border-radius);
    --md-radius-extra-large: var(--border-radius); /* Luxury tetap tajam */

}

/* ============================================================
   SKIN 5: AKILA FLORIST (Brand Identity / Live Case Study)
   ============================================================ */
.skin-akila-florist {
    /* Identitas Utama */
    --primary-color: #d946ef;       /* Fuchsia/Pink khas Akila */
    --primary-hover: #c026d3;
    --accent-color: #fdf4ff;        /* Light Purple untuk kontainer */
    --accent-hover: #fae8ff;
    
    /* Background & Text */
    --bg-color: #ffffff;            
    --bg-light: #fafafa;            
    --text-color: #1e1e1e;          
    --text-muted: #6b7280;          
    --white: #ffffff;
    
    /* Tipografi & Karakter */
    --font-heading: 'Plus Jakarta Sans', sans-serif; /* Modern & Clean */
    --font-body: 'Inter', sans-serif;
    --border-radius: 16px;          /* App-like, sangat lembut */
    --card-shadow: 0 10px 25px rgba(217, 70, 239, 0.08); 
    --btn-text-transform: none;     /* Lebih santai & bersahabat */

    /* Header & Footer */
    --header-bg: #ffffff;
    --header-text: #1e1e1e;
    --footer-bg: #1e1e1e;
    --footer-text: #ffffff;

    /* MD3 Mapping (Dinamis untuk App-Like UI) */
    --md-sys-color-primary: var(--primary-color);
    --md-sys-color-on-primary: var(--white);
    --md-sys-color-surface: var(--bg-color);
    --md-sys-color-on-surface: var(--text-color);
    --md-sys-color-surface-container: #fdf4ff; /* Menggunakan aksen lembut untuk Nav Bar */
    --md-sys-color-primary-container: var(--accent-color);
    --md-sys-color-on-primary-container: var(--primary-color);

    /* MD3 Mapping Radius */
    --md-radius-small: 8px;
    --md-radius-medium: 12px;
    --md-radius-large: var(--border-radius);    /* Mengikuti 16px */
    --md-radius-extra-large: 28px;              /* Standar pill button MD3 */
}