@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>

 This file is part of a Moko Consulting project.

 SPDX-License-Identifier: GPL-3.0-or-later

 # FILE INFORMATION
 DEFGROUP: Joomla.Template.Site
 INGROUP: MokoCassiopeia.Templates
 PATH: ./css/colors/light/colors_custom.css
 VERSION: 01.00.00
 CLIENT: Kiddieland Child Care Center
 BRIEF: Custom light mode color definitions for Kiddieland

 # DEPLOYMENT
 Copy to: media/templates/site/kiddieland-cassiopeia/css/colors/light/colors_custom.css
 Activate: Joomla Admin → System → Site Templates → MokoCassiopeia → Theme → Light Mode Palette → Custom
*/

/* -----------------------------------------------
 * KIDDIELAND — CUSTOM LIGHT THEME
 * --------------------------------------------- */

:root[data-bs-theme='light']{
color-scheme: light;

/* ===== BRAND & THEME COLORS ===== */
--color-primary: #4b893f;
--accent-color-primary: #3f7235;
--accent-color-secondary: #001B4C;

/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: #fff;
--nav-text-color: #fff;
--nav-bg-color: #4b893f;

/* ===== LINKS ===== */
--color-link: #1c73d4;
--color-hover: #3f7235;
--color-active: var(--mainmenu-nav-link-color);
--link-color: #1c73d4;
--link-color-rgb: 28, 115, 212;
--link-decoration: none;
--link-hover-color: #3f7235;
--link-hover-color-rgb: 63, 114, 53;
--link-active-color: var(--link-color);

/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;

/* ===== NAVBAR ===== */
--navbar-padding-x: 1rem;
--navbar-padding-y: 0.5rem;
--navbar-color: var(--nav-text-color);
--navbar-active-color: var(--mainmenu-nav-link-color);
--navbar-disabled-color: #6c757d;
--navbar-brand-padding-y: 0.3125rem;
--navbar-brand-margin-end: 1rem;
--navbar-brand-font-size: 1.25rem;
--navbar-brand-color: var(--nav-text-color);
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
--navbar-nav-link-padding-x: 0.5rem;
--navbar-toggler-padding-y: 0.25rem;
--navbar-toggler-padding-x: 0.75rem;
--navbar-toggler-font-size: 1.25rem;
--navbar-toggler-border-color: rgba(255, 255, 255, 0.3);
--navbar-toggler-border-radius: 0.25rem;
--navbar-toggler-focus-width: 0.25rem;
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
--nav-link-padding-x: 1rem;
--nav-link-padding-y: 0.5rem;
--nav-link-font-weight: 400;
--nav-link-color: var(--nav-text-color);
--nav-link-active-color: var(--mainmenu-nav-link-color);
--nav-link-disabled-color: #6c757d;

/* ===== TYPOGRAPHY & BODY ===== */
--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;
--body-color: #495057;
--body-color-rgb: 73, 80, 87;
--body-bg: #f0f4fb;
--body-bg-rgb: 240, 244, 251;
--heading-color: #4b893f;
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #49505780;
--secondary-color-rgb: 73, 80, 87;
--tertiary-color: #49505740;
--tertiary-color-rgb: 73, 80, 87;
--muted-color: #6d757e;
--code-color: #d63384;
--code-color-ink: var(--code-color, #d63384);
--highlight-color: #000;
--highlight-bg: #fff3cd;

/* ===== LAYOUT & SPACING ===== */
--padding-x: 0.15rem;
--padding-y: 0.15rem;
--bg-opacity: 1;
--nav-toggle-size: 3rem;
--gradient: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));
--secondary-bg: #e3eaf5;
--secondary-bg-rgb: 227, 234, 245;
--tertiary-bg: #f7f9fd;
--tertiary-bg-rgb: 247, 249, 253;
--hr-color: var(--border-color, #dfe3e7);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #4b893f);
--selection-bg: var(--highlight-bg, #fff3cd);
--selection-ink: var(--body-color, #495057);
--border: 5px;

/* ===== BREAKPOINTS ===== */
--bp-xs: 0;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 992px;
--bp-xl: 1200px;

/* ===== BOOTSTRAP PALETTE ===== */
--primary: #4b893f;
--secondary: #6c757d;
--success: #3f7235;
--info: #1c73d4;
--warning: #d4860a;
--danger: #c23a31;
--light: #f0f4fb;
--dark: #001B4C;
--primary-rgb: 75, 137, 63;
--secondary-rgb: 108, 117, 125;
--success-rgb: 63, 114, 53;
--info-rgb: 28, 115, 212;
--warning-rgb: 212, 134, 10;
--danger-rgb: 194, 58, 49;
--light-rgb: 240, 244, 251;
--dark-rgb: 0, 27, 76;
--primary-text-emphasis: #2d5326;
--secondary-text-emphasis: #3d4349;
--success-text-emphasis: #264420;
--info-text-emphasis: #0d4580;
--warning-text-emphasis: #7a4d06;
--danger-text-emphasis: #6e1f1a;
--light-text-emphasis: #495057;
--dark-text-emphasis: #495057;
--primary-bg-subtle: #d7ebd3;
--secondary-bg-subtle: #e2e5e8;
--success-bg-subtle: #cfe3cb;
--info-bg-subtle: #cde3f8;
--warning-bg-subtle: #faeacc;
--danger-bg-subtle: #f5d0ce;
--light-bg-subtle: #f8fafe;
--dark-bg-subtle: #d0d5e0;
--primary-border-subtle: #9ec698;
--secondary-border-subtle: #c4c9ce;
--success-border-subtle: #8fc487;
--info-border-subtle: #8dc0f0;
--warning-border-subtle: #f0c066;
--danger-border-subtle: #e89490;
--light-border-subtle: #e3eaf5;
--dark-border-subtle: #a0aac0;

/* ===== STANDARD COLORS ===== */
--blue: #1c73d4;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #d63384;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #4b893f;
--teal: #20c997;
--cyan: #0dcaf0;
--black: #000;
--white: #fff;

/* ===== GRAY SCALE ===== */
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6c757d;
--gray-700: #495057;
--gray-800: #343a40;
--gray-900: #212529;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;

/* ===== HEADER BACKGROUND ===== */
--header-background-image: url('https://kiddieland.care/images/branding/header.png') bottom center;
--header-background-attachment: scroll;
--header-background-repeat: no-repeat;
--header-background-size: cover;

/* ===== CONTAINER BACKGROUNDS ===== */
/* Below Topbar Container */
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: no-repeat;
--container-below-topbar-bg-size: cover;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;

/* Top A Container */
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: no-repeat;
--container-top-a-bg-size: cover;
--container-top-a-border: ;
--container-top-a-border-radius: ;

/* Top B Container */
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: no-repeat;
--container-top-b-bg-size: cover;
--container-top-b-border: ;
--container-top-b-border-radius: ;

/* TOC Container */
--container-toc-bg: ;
--container-toc-color: #001B4C;

/* Sidebar Container */
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;

/* Bottom A Container */
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: no-repeat;
--container-bottom-a-bg-size: cover;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;

/* Bottom B Container */
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;

/* ===== BORDERS ===== */
--border-width: 1px;
--border-style: solid;
--border-color: #c8d4e8;
--border-color-translucent: rgba(0, 0, 0, 0.1);
--border-radius: .25rem;
--border-radius-sm: .2rem;
--border-radius-lg: .3rem;
--border-radius-xl: .3rem;
--border-radius-xxl: 2rem;
--border-radius-pill: 50rem;

/* ===== SHADOWS ===== */
--box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
--box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
--box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

/* ===== FOCUS & FORMS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: rgba(75, 137, 63, 0.25);
--input-color: #495057;
--input-bg: #ffffff;
--input-border-color: #c8d4e8;
--input-focus-border-color: #4b893f;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(75, 137, 63, 0.25);
--input-placeholder-color: #adb5bd;
--input-disabled-bg: #e9ecef;
--input-disabled-border-color: #ced4da;
--form-valid-color: #3f7235;
--form-valid-border-color: #3f7235;
--form-invalid-color: #c23a31;
--form-invalid-border-color: #c23a31;

/* ===== BUTTONS ===== */
--btn-border-radius: var(--border-radius);
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);

/* ===== CARDS ===== */
--card-spacer-y: 1rem;
--card-spacer-x: 1rem;
--card-title-spacer-y: 0.5rem;
--card-border-width: 1px;
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-box-shadow: none;
--card-inner-border-radius: calc(var(--border-radius) - 1px);
--card-cap-padding-y: 0.5rem;
--card-cap-padding-x: 1rem;
--card-cap-bg: rgba(0, 0, 0, 0.03);
--card-cap-color: var(--body-color);
--card-height: auto;
--card-color: var(--body-color);
--card-bg: #ffffff;
--card-img-overlay-padding: 1rem;
--card-group-margin: 0.75rem;

/* ===== VIRTUEMART (VM) ===== */
--vm-surface: var(--secondary-bg);
--vm-surface-2: var(--tertiary-bg);
--vm-text: var(--body-color);
--vm-text-strong: #000000;
--vm-text-muted: var(--gray-600);
--vm-border: var(--border-color);
--vm-price-color: var(--success);
--vm-container-max-width: 1200px;
--vm-section-gap: 2rem;
--vm-block-radius: var(--border-radius);
--vm-block-shadow: var(--box-shadow-sm);
--vm-category-title-size: 2rem;
--vm-subcategory-title-size: 1.5rem;
--vm-page-title-size: 1.75rem;
--vm-products-type-title-size: 1.25rem;
--vm-product-title-size: 1.125rem;
--vm-product-title-weight: 500;
--vm-products-type-title-weight: 600;
--vm-price-size: 1.5rem;
--vm-price-detail-size: 1.125rem;
--vm-price-desc-size: 0.875rem;
--vm-input-radius: var(--border-radius);
--vm-input-shadow: var(--box-shadow-sm);
--vm-qty-width: 80px;
--vm-cart-dropdown-min-width: 300px;
--vm-alert-radius: var(--border-radius);
--vm-alert-shadow: var(--box-shadow-sm);
--vm-availability-bg: var(--success-bg-subtle);
--vm-availability-text: var(--success);
--vm-btn-padding-x: 1rem;
--vm-btn-padding-y: 0.5rem;
--vm-btn-radius: var(--border-radius);
--vm-btn-shadow: var(--box-shadow-sm);
--vm-btn-primary-bg: var(--primary);
--vm-btn-primary-text: #ffffff;
--vm-btn-primary-border: var(--primary);
--vm-btn-secondary-bg: var(--secondary);
--vm-btn-secondary-text: #ffffff;
--vm-btn-secondary-border: var(--secondary);
--vm-image-overlay-gap-x: 0.5rem;
--vm-image-overlay-gap-y: 0.5rem;
--vm-image-overlay-raise: 0.25rem;
--vm-image-overlay-btn-size: 2.5rem;
--vm-image-overlay-btn-radius: 50%;
--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.5);
--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.7);
--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.3);
--vm-image-overlay-btn-border-width: 1px;
--vm-image-overlay-btn-color: var(--body-color);
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
--vm-vendor-menu-bg: var(--secondary-bg);
--vm-vendor-menu-border: var(--border-color);
--vm-vendor-menu-radius: var(--border-radius);
--vm-vendor-menu-shadow: var(--box-shadow-sm);
--vm-vendor-menu-item-gap: 0.25rem;
--vm-vendor-menu-item-padding-x: 1rem;
--vm-vendor-menu-item-padding-y: 0.5rem;
--vm-vendor-menu-pill-radius: 50rem;
--vm-vendor-menu-link: var(--link-color);
--vm-vendor-menu-link-hover: var(--link-hover-color);
--vm-vendor-menu-link-active: var(--primary);
--vm-vendor-menu-hover-bg: var(--tertiary-bg);

/* ===== GABLE ===== */
--gab-blue: #1c73d4;
--gab-green: #4b893f;
--gab-red: #c23a31;
--gab-orange: #fd7e14;
--gab-gray1: #6c757d;
--gab-gray2: #adb5bd;
--gab-gray3: #dee2e6;
}