/* Toko Bunga Cileungsi — landing page styles
   Design tokens dari Toko Bunga Cikarang Design System */

/* ============================================================
   Toko Bunga Cikarang — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&family=Dancing+Script:wght@400;600;700&display=swap');

/* ── Base Color Palette ─────────────────────────────────── */
:root {
  /* Floral Rose */
  --color-rose-50:  #FDF2F4;
  --color-rose-100: #FAE0E5;
  --color-rose-200: #F4BFCA;
  --color-rose-300: #EBA0B2;
  --color-rose-400: #E07D96;
  --color-rose-500: #D4607A;  /* brand primary */
  --color-rose-600: #B8415C;
  --color-rose-700: #8B2A42;
  --color-rose-800: #5C1A2B;
  --color-rose-900: #330D18;

  /* Sage Green */
  --color-sage-50:  #F2F7F3;
  --color-sage-100: #DEEEE1;
  --color-sage-200: #BDDAC3;
  --color-sage-300: #9BC5A4;
  --color-sage-400: #7AAF86;
  --color-sage-500: #5E9A6D;  /* brand secondary */
  --color-sage-600: #4A7C56;
  --color-sage-700: #365C3F;
  --color-sage-800: #233D2A;
  --color-sage-900: #112014;

  /* Warm Gold */
  --color-gold-50:  #FDF7EE;
  --color-gold-100: #FAECCE;
  --color-gold-200: #F4D59D;
  --color-gold-300: #EDBC6C;
  --color-gold-400: #DEA044;
  --color-gold-500: #C9853A;  /* accent gold */
  --color-gold-600: #A86828;
  --color-gold-700: #7D4C1A;
  --color-gold-800: #52320F;
  --color-gold-900: #2A1906;

  /* Cream / Warm Neutral */
  --color-cream-50:  #FEFCF8;
  --color-cream-100: #FDF8F0;
  --color-cream-200: #FAF0E0;
  --color-cream-300: #F5E5CA;
  --color-cream-400: #EDD5AE;
  --color-cream-500: #DFC292;
  --color-cream-600: #C9A870;
  --color-cream-700: #A07E4A;
  --color-cream-800: #70562C;
  --color-cream-900: #3D2E12;

  /* Deep / Text */
  --color-deep-50:  #F5F0ED;
  --color-deep-100: #E8DDD8;
  --color-deep-200: #CABDB6;
  --color-deep-300: #A89890;
  --color-deep-400: #7A6860;
  --color-deep-500: #5A4A42;
  --color-deep-600: #3E302A;
  --color-deep-700: #2C1810;  /* primary text */
  --color-deep-800: #1A0E08;
  --color-deep-900: #0A0503;

  /* ── Semantic Tokens ──────────────────────────────────── */

  /* Backgrounds */
  --bg-page:        var(--color-cream-100);  /* main page bg */
  --bg-surface:     #FFFFFF;                 /* card / panel bg */
  --bg-subtle:      var(--color-cream-200);  /* section dividers */
  --bg-hero:        var(--color-rose-50);    /* hero section tint */
  --bg-inverse:     var(--color-deep-700);   /* dark sections */

  /* Foregrounds / Text */
  --fg-primary:     var(--color-deep-700);   /* headings & body */
  --fg-secondary:   var(--color-deep-500);   /* captions, meta */
  --fg-muted:       var(--color-deep-400);   /* placeholders */
  --fg-inverse:     #FFFFFF;                 /* text on dark */
  --fg-brand:       var(--color-rose-500);   /* brand text */
  --fg-accent:      var(--color-gold-500);   /* gold accent text */
  --fg-success:     var(--color-sage-600);   /* positive states */

  /* Brand Actions */
  --action-primary:         var(--color-rose-500);
  --action-primary-hover:   var(--color-rose-600);
  --action-primary-press:   var(--color-rose-700);
  --action-primary-fg:      #FFFFFF;
  --action-secondary:       var(--color-sage-500);
  --action-secondary-hover: var(--color-sage-600);
  --action-secondary-fg:    #FFFFFF;
  --action-ghost-hover:     var(--color-rose-50);

  /* WhatsApp */
  --action-whatsapp:        #25D366;
  --action-whatsapp-hover:  #1DA851;
  --action-whatsapp-fg:     #FFFFFF;

  /* Borders */
  --border-subtle:  rgba(44, 24, 16, 0.07);
  --border-default: rgba(44, 24, 16, 0.12);
  --border-focus:   var(--color-rose-400);

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(44, 24, 16, 0.06);
  --shadow-sm:   0 2px 8px rgba(44, 24, 16, 0.08);
  --shadow-md:   0 4px 16px rgba(44, 24, 16, 0.10);
  --shadow-lg:   0 8px 32px rgba(44, 24, 16, 0.12);
  --shadow-xl:   0 16px 48px rgba(44, 24, 16, 0.14);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Spacing Scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Typography Tokens ───────────────────────────────── */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-accent:    'Dancing Script', cursive;

  /* Type Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.14em;
}

/* ── Semantic Type Styles ────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.accent-script {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--fg-brand);
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--fg-brand);
}

/* ── Base Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}


/* ── Landing page: transisi, hover, responsif ─────────────── */
@keyframes floatUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body { background: var(--bg-page); }
a { color: var(--color-rose-600); text-decoration: none; }
a:hover { color: var(--color-rose-700); text-decoration: underline; }
details summary::-webkit-details-marker { display: none; }
@media (max-width: 1080px) {
  [data-g="cards"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-g="galeri"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
  [data-g="hero"], [data-g="dekor"], [data-g="area"] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  [data-g="steps"], [data-g="foot"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-g="hero"] h1 { font-size: 38px !important; }
  [data-g="dekor"] > div:first-child { padding: 36px 24px !important; }
  [data-g="dekor"] > div:last-child { min-height: 280px !important; }
}
@media (max-width: 620px) {
  [data-g="cards"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-g="galeri"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-g="hero"] > div:last-child { height: 380px !important; }
}

.tbc-landing a, .tbc-landing article, .tbc-landing figure, .tbc-landing summary {
  transition: all 220ms ease-out;
}
.tbc-h1:hover {
  background:var(--action-whatsapp-hover);
}
.tbc-h2:hover {
  background:var(--action-whatsapp-hover);
  transform:translateY(-2px);
}
.tbc-h3:hover {
  background:var(--action-ghost-hover);
  border-color:var(--color-rose-300);
}
.tbc-h4:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.tbc-h5:hover {
  background:var(--action-primary-hover);
}
.tbc-h6:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.tbc-h7:hover {
  background:var(--action-whatsapp-hover);
  transform:scale(1.06);
}

/* Netralkan gaya tema pada halaman landing */
.tbc-landing img { max-width: 100%; height: auto; }
.tbc-landing ul, .tbc-landing ol { margin: 0; padding: 0; }
.tbc-landing h1, .tbc-landing h2, .tbc-landing h3 { margin: 0; }