/**
 * BRANDING.CSS - AKILA FLORIST ATELIER DESIGN SYSTEM 2.0
 * Path: /assets/css/01-root/branding.css
 * Version: 2.0.0 (Master Unified Specification)
 * 
 * DESIGN TOKENS (Velvet Crimson & Warm Ivory Canvas):
 * 1. Master Brand: Velvet Crimson Rose (#BE0038) & Dark Rosewood (#881337)
 * 2. Canvas & Surface: Warm Ivory Soft (#FCFAF9) & Alabaster (#FAF8F7)
 * 3. Typography: Rich Charcoal (#111827) & Plus Jakarta Sans
 * 4. Shapes: Standard Radii (8px, 12px, 16px, 9999px)
 * 
 * PRESET SYSTEM:
 * - Default / .skin-modern: The Unified Atelier (Velvet Crimson + Warm Ivory)
 * - .skin-luxe: Heritage Corporate (Midnight Onyx #121820 + Champagne Gold #C5A880)
 */

/* ============================================================
   MASTER TOKENS: UNIFIED ATELIER (Default :root)
   ============================================================ */
:root,
body.skin-modern {
    /* --- 1. Primitive Brand Palette (Crimson Rose) --- */
    --st-brand-50:  #fff1f2;
    --st-brand-100: #ffe4e6;
    --st-brand-200: #fecdd3;
    --st-brand-500: #ff385c; /* Soft coral highlight only */
    --st-brand-600: #e11d48;
    --st-brand-700: #be0038; /* ⭐ MASTER BRAND & HARGA */
    --st-brand-800: #9f1239; /* Hover Primary */
    --st-brand-900: #881337;

    /* --- 2. Canvas & Surfaces (Warm Ivory) --- */
    --st-canvas:         #FCFAF9; /* Canvas body website */
    --st-surface-card:   #FFFFFF; /* Kartu produk & box */
    --st-surface-subtle: #FAF8F7; /* Strip judul & search input */
    --st-surface-ivory:  #F7F4F2; /* TopBar header */
    --st-surface-muted:  #F0ECE9;
    --st-header-glass:   rgba(255, 255, 255, 0.95); /* Header Glassmorphism */

    /* --- 3. Typography Neutrals (Rich Charcoal) --- */
    --st-charcoal-900: #111827; /* Headings H1, H2, H3, Card Title */
    --st-charcoal-800: #1f2937; /* Body Text bold / high contrast */
    --st-charcoal-700: #374151; /* Body Text regular */
    --st-charcoal-600: #4b5563; /* Subtitles & lead paragraphs */
    --st-charcoal-500: #6b7280; /* Muted caption & metadata */
    --st-stone-400:    #9ca3af; /* Strikethrough price */
    --st-stone-300:    #d6d3d1; /* Hover border */
    --st-stone-200:    #e7e5e4; /* Default border */
    --st-stone-100:    #f5f5f4; /* Subtle button / chip background */

    /* --- 4. Trust, Status & WhatsApp --- */
    --st-emerald-700:  #047857;
    --st-emerald-600:  #059669; /* Trust badge & checklist */
    --st-emerald-500:  #10b981;
    --st-emerald-50:   #ecfdf5;
    --st-whatsapp:     #25D366; /* WhatsApp brand */
    --st-whatsapp-hover:#1fb855;

    /* --- 5. Shapes & Radii --- */
    --st-radius-sm:   8px;
    --st-radius-md:   12px;   /* Buttons & inputs */
    --st-radius-lg:   16px;   /* Cards & filter box */
    --st-radius-xl:   24px;   /* Bottom sheets */
    --st-radius-full: 9999px; /* Pills & badges */

    /* --- 6. Elevation & Shadows --- */
    --st-shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --st-shadow-card:  0 4px 16px -3px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.02);
    --st-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --st-shadow-float: 0 12px 28px -4px rgba(0, 0, 0, 0.16);

    /* --- 7. Spacing Scale Tokens (Design System 2.0 Section 4.1) --- */
    --st-space-1:  4px;
    --st-space-2:  8px;
    --st-space-3:  12px;
    --st-space-4:  16px;
    --st-space-5:  20px;
    --st-space-6:  24px;
    --st-space-8:  32px;
    --st-space-10: 40px;
    --st-space-12: 48px;
    --st-space-16: 64px;

    /* --- 8. Typography Configuration & Fluid Scale --- */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --st-font-family: var(--font-body);
    --st-h1-size:   clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
    --st-h2-size:   clamp(1.2rem, 1.8vw + 0.5rem, 1.5rem);
    --st-h3-size:   clamp(0.95rem, 1.2vw + 0.3rem, 1.05rem);
    --st-p-size:    clamp(0.8125rem, 0.4vw + 0.7rem, 0.875rem);
    --st-p-line-height: 1.6;

    /* --- 8. BACKWARD-COMPATIBILITY ALIASES --- */
    /* Menjaga agar komponen lama yang memanggil token lama tetap rapi seketika */
    --primary-color:    var(--st-brand-700);
    --primary-hover:    var(--st-brand-800);
    --accent-color:     var(--st-brand-700);
    --accent-hover:     var(--st-brand-800);
    --dark-base:        var(--st-charcoal-900);
    --primary-rgb:      190, 0, 56;
    --accent-rgb:       190, 0, 56;
    --primary-soft:     var(--st-brand-50);
    
    --bg-color:         var(--st-canvas);
    --bg-light:         var(--st-surface-subtle);
    --text-color:       var(--st-charcoal-800);
    --text-muted:       var(--st-charcoal-600);
    --white:            #ffffff;

    --border-radius:    var(--st-radius-md);
    --card-shadow:      var(--st-shadow-card);
    --btn-text-transform: none;

    --header-bg:        var(--st-surface-card);
    --header-text:      var(--st-charcoal-900);
    --footer-bg:        #10141f;
    --footer-text:      #e2e8f0;

    --border-color:     var(--st-stone-200);
    --card-aspect-ratio: 4 / 5; /* Portrait elegan untuk seluruh buket */

    --md-radius-small:  var(--st-radius-sm);
    --md-radius-medium: var(--st-radius-md);
    --md-radius-large:  var(--st-radius-lg);
    --md-radius-extra-large: var(--st-radius-xl);

    /* Legacy Helper Overrides */
    --st-color-primary:       var(--st-brand-700);
    --st-color-primary-light: var(--st-brand-50);
    --st-color-text:          var(--st-charcoal-900);
    --st-color-text-muted:    var(--st-charcoal-600);
    --st-color-border:        var(--st-stone-200);

    /* --- 9. Container, Gutters & Layout Tokens (Design System 2.0.0 Section 4 & 8) --- */
    --st-container-max:            1280px;
    --st-gutter-mobile:            16px;
    --st-gutter-tablet:            24px;
    --st-gutter-desktop:           32px;
    --st-section-padding-y:        clamp(1rem, 2vw, 1.75rem); /* 16px mobile s/d 28px desktop -> spasi antar section rapat & proporsional */
    --st-section-padding-mobile:   1rem;                      /* 16px (16px bottom + 16px top = 32px gap antar section) */
    --st-section-padding-tablet:   1.25rem;                   /* 20px */
    --st-section-padding-desktop:  1.75rem;                   /* 28px (28px bottom + 28px top = 56px gap antar section) */
    --st-section-gap:              clamp(1.5rem, 3vw, 2.5rem);
}

/* ============================================================
   PRESET 2: THE LUXE ATELIER & HERITAGE (Bunga Papan & VIP)
   ============================================================ */
body.skin-luxe {
    --primary-color: #121820;       /* Midnight Onyx */
    --primary-hover: #090D11;
    --accent-color: #C5A880;        /* Burnished Gold */
    --accent-hover: #B39366;
    --dark-base: #121820;
    --primary-rgb: 18, 24, 32;
    --accent-rgb: 197, 168, 128;
    --primary-soft: rgba(197, 168, 128, 0.16);

    --bg-color: #FCFAF7;
    --bg-light: #F7F4EE;
    --text-color: #111827;
    --text-muted: #555555;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --border-radius: 8px;
    --card-shadow: 0 8px 24px -4px rgba(18, 24, 32, 0.08);

    --header-bg: #121820;
    --header-text: #ffffff;
    --footer-bg: #090D11;
    --footer-text: #e5e1dd;

    --border-color: rgba(197, 168, 128, 0.28);
    --card-aspect-ratio: 4 / 5;
}