/*
Theme Name: La Bocca Juice
Theme URI: https://laboccajuice.ca
Author: La Bocca Juice
Description: Playful, summery, mobile-first WordPress theme for La Bocca Juice — juice, crepes, waffles & gelato in Ottawa. Banana-mascot brand, section-themed colours on a cream background.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: labocca
*/

/* The full design system + components live in assets/css/main.css,
   enqueued via functions.php. This file holds the WordPress theme header
   and the core CSS custom properties (the La Bocca palette + tokens). */

:root {
    /* ---- Brand palette (from the brief) ---- */
    --banana-yellow:    #FFD54F;
    --mango-orange:     #FFB74D;
    --strawberry-pink:  #FF6F91;
    --mint-green:       #8DE1C2;
    --chocolate-brown:  #5D4037;
    --cream:            #FFF8EE;
    --white:            #FFFFFF;
    --light-pink:       #FFD6E0;
    --light-yellow:     #FFF4C4;
    --light-mint:       #DDF7EE;
    --light-orange:     #FFE4C2;
    --soft-brown:       #8D6E63;
    --cta-orange:       #FF8A00;

    /* ---- Semantic ---- */
    --color-bg:         var(--cream);
    --color-card-bg:    var(--white);
    --color-text:       #4A332C;   /* warm near-brown body text, AA on cream */
    --color-heading:    var(--chocolate-brown);
    --color-muted:      #8D6E63;
    --color-footer-bg:  var(--chocolate-brown);
    --color-footer-text:#FBEFE3;

    /* ---- Fonts (font-display: swap set in @font import) ---- */
    --font-heading:     'Fredoka', 'Baloo 2', system-ui, sans-serif;
    --font-logo:        'Baloo 2', 'Fredoka', system-ui, sans-serif;
    --font-body:        'Poppins', system-ui, Arial, sans-serif;

    /* ---- Shape ---- */
    --radius-btn:       18px;
    --radius-card:      22px;
    --radius-pill:      999px;
    --radius-sm:        12px;

    /* ---- Soft shadows (no harsh black) ---- */
    --shadow-sm:   0 4px 14px rgba(93, 64, 55, 0.10);
    --shadow-md:   0 10px 30px rgba(93, 64, 55, 0.14);
    --shadow-lg:   0 18px 48px rgba(93, 64, 55, 0.20);

    --header-height: 76px;
    --container:     1180px;
    --transition:    0.25s ease;
}