/*
Theme Name: Bartolo Bakehouse
Theme URI: https://bartolobakehouse.com
Description: Custom theme for Bartolo Lisboa Bakehouse — Portuguese bakery in KL
Version: 1.0.0
Author: Bartolo
Text Domain: bartolo
*/

:root {
  /* ========================================
     BRAND COLORS
     ======================================== */
  --color-primary:          #115E32;
  --color-primary-rgb:      17, 94, 50;
  --color-gold:             #FDB913;
  --color-gold-rgb:         253, 185, 19;
  --color-cream:            #FFE6CB;
  --color-cream-rgb:        255, 230, 203;
  --color-dark:             #004D28;
  --color-dark-rgb:         0, 77, 40;
  --color-dark-alt:         #006838;
  --color-dark-card:        #0D4A26;
  --color-white:            #FFFFFF;
  --color-white-rgb:        255, 255, 255;
  --color-text:             #115E32;
  --color-text-light:       #2D7A4A;
  --color-text-on-dark:     #FFFFFF;
  --color-text-on-cream:    #115E32;

  /* Semantic Colors */
  --color-success:          #4D7C0F;
  --color-error:            #BE123C;
  --color-sale:             #E11D48;
  --color-rating:           #F59E0B;
  --color-focus:            #0B61CD;

  /* Surface Colors */
  --color-bg-page:          var(--color-cream);
  --color-bg-header:        var(--color-cream);
  --color-bg-footer:        var(--color-dark-alt);
  --color-bg-announcement:  var(--color-dark);
  --color-bg-card:          var(--color-white);
  --color-bg-overlay:       rgba(var(--color-primary-rgb), 0.6);
  --color-bg-hero-overlay:  rgba(var(--color-primary-rgb), 0.35);

  /* Button Colors */
  --color-btn-primary-bg:     var(--color-primary);
  --color-btn-primary-text:   var(--color-white);
  --color-btn-secondary-bg:   transparent;
  --color-btn-secondary-text: var(--color-primary);
  --color-btn-secondary-border: var(--color-primary);
  --color-btn-gold-bg:        var(--color-gold);
  --color-btn-gold-text:      var(--color-primary);
  --color-btn-footer-bg:      var(--color-white);
  --color-btn-footer-text:    var(--color-dark);

  /* Shadow */
  --shadow-color:           rgba(var(--color-gold-rgb), 0.15);
  --shadow-card:            0 2px 16px var(--shadow-color);
  --shadow-card-hover:      0 4px 24px rgba(var(--color-gold-rgb), 0.25);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-heading:           'Lora', serif;
  --font-body:              'Source Sans 3', sans-serif;

  /* Font Weights */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* Heading Properties */
  --heading-weight:         var(--weight-semibold);
  --heading-line-height:    1.1;
  --heading-letter-spacing: 0.02em;
  --heading-transform:      uppercase;

  /* Body Properties */
  --body-weight:            var(--weight-regular);
  --body-line-height:       1.6;
  --body-letter-spacing:    0em;

  /* Font Sizes -- Fluid Scale */
  --text-3xs:   0.625rem;
  --text-2xs:   0.6875rem;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1.0rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3.0rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* Responsive Font Sizes */
  --text-nav:        clamp(0.875rem, 0.748rem + 0.3174vw, 1.125rem);
  --text-button:     clamp(0.875rem, 0.8115rem + 0.1587vw, 1.0rem);
  --text-card-title: clamp(1.0rem, 0.873rem + 0.3175vw, 1.25rem);
  --text-hero:       clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --text-section:    clamp(1.5rem, 1.0rem + 2vw, 3.0rem);

  /* ========================================
     SPACING SCALE
     ======================================== */
  --sp-0:    0;
  --sp-0d5:  0.125rem;
  --sp-1:    0.25rem;
  --sp-1d5:  0.375rem;
  --sp-2:    0.5rem;
  --sp-2d5:  0.625rem;
  --sp-3:    0.75rem;
  --sp-4:    1.0rem;
  --sp-5:    1.25rem;
  --sp-6:    1.5rem;
  --sp-7:    1.75rem;
  --sp-8:    2.0rem;
  --sp-9:    2.25rem;
  --sp-10:   2.5rem;
  --sp-12:   3.0rem;
  --sp-14:   3.5rem;
  --sp-16:   4.0rem;
  --sp-20:   5.0rem;
  --sp-24:   6.0rem;
  --sp-32:   8.0rem;
  --sp-40:   10.0rem;

  /* Contextual Spacing */
  --gap-section:       clamp(3rem, 5vw, 5rem);
  --gap-grid:          clamp(24px, 3vw, 40px);
  --gap-padding:       clamp(1.25rem, 2.526vw, 3rem);
  --padding-page:      1.25rem;
  --padding-page-md:   2.25rem;
  --padding-page-lg:   3.0rem;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --rounded-none:    0;
  --rounded-sm:      0.25rem;
  --rounded-md:      0.5rem;
  --rounded-lg:      0.75rem;
  --rounded-xl:      1.0rem;
  --rounded-2xl:     1.5rem;
  --rounded-card:    clamp(0.625rem, 1.053vw, 1.25rem);
  --rounded-button:  3.75rem;
  --rounded-full:    9999px;

  /* ========================================
     LAYOUT
     ======================================== */
  --page-width:        1400px;
  --page-container:    min(calc(100vw - var(--padding-page) * 2), var(--page-width));
  --grid-cols-desktop: 3;
  --grid-cols-tablet:  2;
  --grid-cols-mobile:  2;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-drawer:  350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base:           1;
  --z-dropdown:       10;
  --z-sticky:         20;
  --z-overlay:        30;
  --z-drawer:         40;
  --z-modal:          50;
  --z-announcement:   60;
  --z-whatsapp:       70;
}

/* ========================================
   MOBILE CUSTOM PROPERTY OVERRIDES
   ======================================== */
@media (max-width: 767px) {
  :root {
    --text-hero:       clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem);
    --text-section:    clamp(1.375rem, 1rem + 1.5vw, 1.75rem);
    --text-card-title: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
    --gap-section:     clamp(2.5rem, 4vw, 3.5rem);
    --gap-grid:        16px;
    --padding-page:    1rem;
  }
}