@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: ./templates/colors_custom_dark.css
 VERSION: 03.06.03
 BRIEF: Template for custom dark mode color definitions
 
 # USAGE INSTRUCTIONS
 1. Copy this file to:
     `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css`
     or
     `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css`     `
 2. Customize the CSS variables below to match your brand colors for dark mode
 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia
 4. Under Theme tab, set "Dark Mode Palette" to "Custom"
 5. Save and view your site in dark mode to see the custom colors
 
 NOTE: This file is excluded from version control (.gitignore) to prevent
 fork-specific customizations from being committed to the repository.
 */

/* -----------------------------------------------
 * CUSTOM DARK THEME
 * --------------------------------------------- */

:root[data-bs-theme='dark']{
	/* System hint for native widgets */
	color-scheme: dark;

	/* ===== PRIMARY BRAND COLORS ===== */
	/* Main brand color used throughout the template */
	--color-primary: #112855;
	
	/* Accent colors for interactive elements */
	--accent-color-primary: #3f8ff0;
	--accent-color-secondary: #6fb3ff;

	/* ===== LINK COLORS ===== */
	/* Color for hyperlinks in dark mode */
	--color-link: white;
	
	/* Color when hovering over links */
	--color-hover: gray;
	
	/* Active link color */
	--color-active: var(--mainmenu-nav-link-color);

	/* ===== NAVIGATION ===== */
	/* Text color in main menu */
	--mainmenu-nav-link-color: #fff;
	
	/* Background color for navigation */
	--nav-text-color: gray;
	--nav-bg-color: var(--color-primary);

	/* ===== HEADER BACKGROUND ===== */
	/* Background image for header section (same as light mode) */
	--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
	--header-background-attachment: fixed;
	--header-background-repeat: repeat;
	--header-background-size: auto;

	/* ===== 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: ;

	/* Table of Contents Container */
	--container-toc-bg: ;
	--container-toc-color: #dbe3ff;

	/* 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: ;

	/* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */
	/* Lightened colors for dark mode visibility */
	--blue: #91a4ff;
	--black: #000;
	--indigo: #b19cff;
	--purple: #c0a5ff;
	--pink: #ff8fc0;
	--red: #ff7a73;
	--orange: #ff9c4d;
	--yellow: #ffd166;
	--green: #78d694;
	--teal: #76e3ff;
	--cyan: #6fb7ff;
	--white: #fff;

	/* Gray scale tuned for dark mode */
	--gray-100: #161a20;
	--gray-200: #1b2027;
	--gray-300: #222831;
	--gray-400: #2b323b;
	--gray-500: #36404a;
	--gray-600: #48525d;
	--gray-700: #5b6672;
	--gray-800: #cfd6de;
	--gray-900: #e6ebf1;

	/* Contextual colors (adjusted for dark backgrounds) */
	--primary: #010156;
	--secondary: #48525d;
	--success: #4aa664;
	--info: #4f7aa0;
	--warning: #c77a00;
	--danger: #c23a31;
	--light: #1b2027;
	--dark: #0f1318;

	/* ===== BODY & TYPOGRAPHY ===== */
	--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: #e6ebf1;
	--body-color-rgb: 230, 235, 241;
	--body-bg: #0e1318;
	--body-bg-rgb: 14, 19, 24;

	/* ===== ADDITIONAL THEME COLORS ===== */
	--muted-color: #6d757e;
	--hr-color: var(--border-color, #dfe3e7);
	--link-active-color: var(--link-color);
	--code-color: #ff7abd;
	--code-color-ink: var(--code-color, #e93f8e);
	--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, #112855);
	--selection-bg: var(--highlight-bg, #fbeea8);
	--selection-ink: var(--body-color, #22262a);
	
	--emphasis-color: #fff;
	--emphasis-color-rgb: 255, 255, 255;

	--secondary-color: #e6ebf1bf;
	--secondary-color-rgb: 230, 235, 241;
	--secondary-bg: #151b22;
	--secondary-bg-rgb: 21, 27, 34;

	--tertiary-color: #e6ebf180;
	--tertiary-color-rgb: 230, 235, 241;
	--tertiary-bg: #10151b;
	--tertiary-bg-rgb: 16, 21, 27;

	--heading-color: #f1f5f9;

	--link-color: #8ab4f8;
	--link-color-rgb: 138, 180, 248;
	--link-decoration: underline;
	--link-hover-color: #c3d6ff;
	--link-hover-color-rgb: 195, 214, 255;

	--highlight-color: #111;
	--highlight-bg: #ffe28a1a;

	/* ===== BORDERS & SHADOWS ===== */
	--border: 5px;
	--border-width: 1px;
	--border-style: solid;
	--border-color: #2b323b;
	--border-color-translucent: #ffffff26;

	--border-radius: .25rem;
	--border-radius-sm: .2rem;
	--border-radius-lg: .3rem;
	--border-radius-xl: .3rem;
	--border-radius-xxl: 2rem;
	--border-radius-pill: 50rem;

	--box-shadow: 0 .5rem 1rem #00000066;
	--box-shadow-sm: 0 .125rem .25rem #00000040;
	--box-shadow-lg: 0 1rem 3rem #00000080;
	--box-shadow-inset: inset 0 1px 2px #00000040;

	/* ===== FORM COLORS ===== */
	--focus-ring-width: .25rem;
	--focus-ring-opacity: .6;
	--focus-ring-color: #5472ff66;

	--form-valid-color: #78d694;
	--form-valid-border-color: #78d694;
	--form-invalid-color: #ff8e86;
	--form-invalid-border-color: #ff8e86;

	/* Offcanvas (moved from template.css) */
	--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.1);
	--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;

	/* Responsive tokens */
	--nav-toggle-size: 3rem;
	--bp-xs: 0;
	--bp-sm: 576px;
	--bp-md: 768px;
	--bp-lg: 992px;
	--bp-xl: 1200px;

	/* Utility opacity defaults */
	--bg-opacity: 1;

	/* Layout padding */
	--padding-x: 1rem;
	--padding-y: 1rem;

	/* Button utilities */
	--btn-border-radius: var(--border-radius);
	--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);

	/* Card variables */
	--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(255, 255, 255, 0.03);
	--card-cap-color: var(--body-color);
	--card-height: auto;
	--card-color: var(--body-color);
	--card-bg: var(--secondary-bg);
	--card-img-overlay-padding: 1rem;
	--card-group-margin: 0.75rem;

	/* VirtueMart surfaces */
	--vm-surface: var(--secondary-bg);
	--vm-surface-2: var(--tertiary-bg);
	--vm-text: var(--body-color);
	--vm-text-strong: #ffffff;
	--vm-text-muted: var(--gray-700);
	--vm-border: var(--border-color);
	--vm-price-color: var(--success);

	/* VM layout and density */
	--vm-container-max-width: 1200px;
	--vm-section-gap: 2rem;
	--vm-block-radius: var(--border-radius);
	--vm-block-shadow: var(--box-shadow-sm);

	/* VM typography */
	--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 controls */
	--vm-input-radius: var(--border-radius);
	--vm-input-shadow: var(--box-shadow-sm);
	--vm-qty-width: 80px;
	--vm-cart-dropdown-min-width: 300px;

	/* VM alerts */
	--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 buttons */
	--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 controls */
	--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.7);
	--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85);
	--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2);
	--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.3);

	/* VM vendor menu tokens */
	--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 colors */
	--gab-blue: #4d9fff;
	--gab-green: #5cb85c;
	--gab-red: #ff6b6b;
	--gab-orange: #ff9f5a;
	--gab-gray1: #868e96;
	--gab-gray2: #adb5bd;
	--gab-gray3: #ced4da;
}