/**
 * Brand Design Tokens - Staff Skills Academy
 * ============================================================================
 * Brand-specific tokens for the Staff Skills Academy theme.
 * Uses brand-agnostic variable names (--brand-*) to enable multi-brand support.
 *
 * Load order: Layer 2b (after 00-tokens-core.css)
 * Dependencies: 00-tokens-core.css
 *
 * To create a new brand theme:
 * 1. Copy this file to 00-tokens-brand-[newbrand].css
 * 2. Update the color and font values
 * 3. Update 00-tokens.css to import the new brand file
 */

:root {
	/* ==========================================================================
	   1. Brand Colors
	   ========================================================================== */

	/* Primary Brand Colors */
	--black: #2b2b2b;
	--brand-main: #085570;
	--brand-highlight: #b7f4af;
	--cream: #f6f6f2;
	--white: #fff;

	/* Grey Scale */
	--grey: #ccc;
	--grey-light: #f2f2f2;
	--border-grey: #d8d8d8;

	/* Text Colors */
	--text-secondary: #666;  /* Medium grey for secondary text, breadcrumbs, meta info */
	--link-color: #2C414C;

	/* Semantic Contrast Tokens - text colors for brand backgrounds */
	--text-on-brand-main: var(--white);           /* White text on dark blue background */
	--text-on-brand-highlight: var(--brand-main); /* Dark blue text on light green background */

	/* Background Colors */
	--bg-1: #ecf8f8;
	--bg-2: #c3d8d8;
	--courses-background: #EBF7F7;

	/* Alert/Feedback Colors */
	--alert: #ff2a2a;
	--alert-bg: #fee7e7;
	--confirm: #6eb36a;
	--focus: #0075ff;

	/* ==========================================================================
	   2. State Colors - Success
	   ========================================================================== */

	--success-light-bg: #e7f7ea;        /* Light green background */
	--success-accent: #c7f5b1;          /* Accent green */
	--success-accent-alt: #b4f0c1;      /* Alternative accent green */
	--badge-success-bg: #034d21;        /* Dark green badge background */
	--badge-success-text: #B7F4AF;      /* Light green badge text (same as --brand-highlight) */

	/* ==========================================================================
	   3. State Colors - Info (Hub Blue)
	   ========================================================================== */

	--info-light-bg: #c8e8f5;           /* Light blue background */
	--info-muted-bg: #d9ecf9;           /* Muted blue background */
	--hub-blue: #80C0E4;                /* Hub blue accent */
	--hub-blue-transparent: #80C0E44D;  /* Hub blue at 30% opacity */

	/* ==========================================================================
	   4. State Colors - Warning (Hub Orange)
	   ========================================================================== */

	--warning-light-bg: #fde4be;        /* Light orange background */
	--warning-accent-bg: #fdebd0;       /* Accent orange background */
	--hub-orange: #FBBD74;              /* Hub orange accent */
	--hub-orange-transparent: #FBBD744D; /* Hub orange at 30% opacity */

	/* ==========================================================================
	   5. Brand Color Variants
	   ========================================================================== */

	--brand-main-dark: #004c66;           /* Darker variant of brand-main */
	--brand-main-darker: #004c5f;         /* Even darker variant */
	--brand-main-darkest: #003b71;        /* Navy variant */
	--brand-main-muted: #004666;          /* Muted variant */
	--brand-main-hover: #00697a;          /* Lighter teal for hover states */

	/* RGB values for alpha compositing */
	--brand-main-rgb: 8, 85, 112;
	--brand-highlight-rgb: 183, 244, 175;

	/* ==========================================================================
	   6. Brand Typography
	   ========================================================================== */

	--brand-font-body: "Archivo", sans-serif;
	--brand-font-heading: "Archivo", sans-serif;

	/* ==========================================================================
	   7. Focus Shadow (uses brand color)
	   ========================================================================== */

	--shadow-outline: 0 0 0 3px var(--focus);

	/* ==========================================================================
	   8. Mega Menu Positioning Variables
	   Note: Positioned relative to nav container, not viewport
	   These values ensure proper alignment without gaps
	   ========================================================================== */

	--mega-menu-desktop-offset: 55px;
	--mega-menu-desktop-scrolling-offset: 55px;
	--mega-menu-mobile-toggle-offset: 52px;
	--mega-menu-mobile-offset: 74px;
	--mega-menu-mobile-scrolling-offset: 56px;

	/* ==========================================================================
	   9. Header Dimension Tokens
	   Brand-specific header sizing for multi-brand support.
	   Child themes override these to match their brand requirements.
	   ========================================================================== */

	/* Header Bar (top white bar with contact info) */
	--header-bar-height: 64px;
	--header-bar-padding-y: 13px;
	--header-bar-padding-x: var(--content-padding-x); /* Aligned with content padding system */

	/* Navigation Container (main nav with logo) */
	--nav-container-height: 65px;
	--nav-container-min-height: 65px;
	--nav-container-height-scrolling: 65px;
	--nav-container-min-height-scrolling: 65px;

	/* Logo Dimensions */
	--logo-height: 90px;
	--logo-width: 202px;
	--logo-margin: 0;
	--logo-height-scrolling: 90px;
	--logo-width-scrolling: 202px;
	--logo-margin-scrolling: 0;
	--logo-background-size: cover;
	--logo-background-position: left center;

	/* Combined Header Spacing (header-bar + nav-container) */
	--clear-header-height: 129px;
	--breadcrumb-top: 129px;
	--breadcrumb-top-scrolling: 129px;  /* Same as non-scrolling (SSA nav doesn't shrink) */

	/* Scroll Behavior Threshold
	   When scroll position exceeds this, header enters "scrolling" mode.
	   Should roughly match header-bar height for smooth transition. */
	--scroll-threshold: 54;  /* unitless for JS parseInt() */

	/* ==========================================================================
	   10. Brand Gradient
	   ========================================================================== */

	/* Primary brand gradient - teal to dark teal diagonal */
	--brand-gradient: linear-gradient(-57deg, rgb(12 111 138 / 100%) 0%, rgb(8 85 112 / 100%) 100%);

	/* ==========================================================================
	   11. Footer Tokens
	   ========================================================================== */

	--footer-bg: var(--brand-main);
	--footer-gradient: var(--brand-gradient);
	--footer-text: var(--white);
	--footer-link: var(--white);
	--footer-link-hover-opacity: 0.7;
}

/* ==========================================================================
   11. Mobile Header Token Overrides
   ==========================================================================
   When header-bar is hidden on mobile (display: none in global-header.css),
   all dependent positioning values need to reflect only nav-container height.

   This centralizes mobile header behavior in the token system rather than
   scattering hardcoded values throughout component CSS files.
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		/* Header-bar is hidden on mobile - set height to 0 for calculations */
		--header-bar-height: 0px;

		/* Recalculate all dependent positioning values */
		--clear-header-height: var(--nav-container-height);      /* 65px */
		--breadcrumb-top: var(--nav-container-height);           /* 65px */
		--breadcrumb-top-scrolling: var(--nav-container-height); /* 65px */
	}
}