/**
 * Brand Design Tokens - Student Academy Plus
 * ============================================================================
 * Brand-specific tokens for the Student Academy Plus 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: #1AE2C8;
	--brand-highlight: #FFF363;  /* Yellow highlight (was incorrectly set to turquoise) */
	--cream: #f6f6f2;
	--white: #fff;

	/* Legacy alias - keep for backwards compatibility */
	--highlight-yellow: #FFF363;

	/* 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 turquoise background */
	--text-on-brand-highlight: var(--black);  /* Black text on yellow background (turquoise has poor contrast) */
	--heading-on-light: var(--black);  /* SAP: black headings on cream/light backgrounds (turquoise has poor contrast) */

	/* 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: #1AE2C8;      /* Turquoise 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: #15C9B1;           /* Darker variant of brand-main */
	--brand-main-darker: #10B09A;         /* Even darker variant */
	--brand-main-darkest: #0A8A7A;        /* Darkest variant */
	--brand-main-muted: #12D4BC;          /* Muted variant */

	/* RGB values for alpha compositing */
	--brand-main-rgb: 26, 226, 200;
	--brand-highlight-rgb: 26, 226, 200;

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

	--brand-font-body: "Poppins", 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 (SAP overrides)
	   Override parent SSA values to match SAP brand requirements.
	   SAP has: taller nav to fit logo, smaller header bar, different logo size
	   ========================================================================== */

	/* Header Bar (top white bar with contact info)
	   SAP has more vertical whitespace than SSA */
	--header-bar-height: 68px;
	--header-bar-padding-y: 20px;
	--header-bar-padding-x: 50px;

	/* Navigation Container (main nav with logo)
	   SAP uses auto height with min-height to accommodate larger logo */
	--nav-container-height: auto;
	--nav-container-min-height: 168px;
	--nav-container-height-scrolling: auto;
	--nav-container-min-height-scrolling: 74px;

	/* Logo Dimensions - SAP logo SVG viewBox is 236x60 (aspect ratio 3.93:1)
	   Container MUST match this ratio for cover to work without cropping */
	--logo-height: 70px;
	--logo-width: 275px;  /* 70 * 3.93 = 275 - maintains SVG aspect ratio */
	--logo-margin: 40px 0 35px 8px;
	--logo-height-scrolling: 45px;
	--logo-width-scrolling: 177px;  /* 45 * 3.93 = 177 */
	--logo-margin-scrolling: 15px 0 15px 8px;
	--logo-background-size: cover;
	--logo-background-position: center center;

	/* Combined Header Spacing (header-bar 68px + nav actual ~180px) */
	--clear-header-height: 248px;
	--breadcrumb-top: 248px;
	--breadcrumb-top-scrolling: 142px;  /* header-bar 68px + scrolling nav 74px */

	/* Scroll Behavior Threshold (SAP override)
	   SAP header-bar is 68px vs SSA's 64px, so scroll triggers later */
	--scroll-threshold: 68;  /* unitless for JS parseInt() */

	/* ==========================================================================
	   10. Header Link Decoration Tokens (SAP overrides)
	   SAP email/phone links have a thick turquoise underline and larger text
	   ========================================================================== */

	--header-link-underline-width: 4px;
	--header-link-underline-color: var(--brand-main);
	--header-bar-font-size: 20px;
	--header-bar-font-weight: 500;

	/* ==========================================================================
	   11. Navigation Menu Tokens (SAP overrides)
	   SAP has slightly larger nav menu text than SSA parent (18px vs 16px)
	   ========================================================================== */

	--nav-menu-font-size: 18px;
	--nav-menu-item-padding: 0 12px;

	/* ==========================================================================
	   12. Footer Tokens (SAP overrides)
	   SAP: Solid turquoise footer with dark text (not SSA blue gradient)
	   ========================================================================== */

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

/* ==========================================================================
   Mobile/Tablet Overrides (≤768px)
   ============================================================================
   UNIFIED breakpoint for all mobile header behavior on SAP.
   At this breakpoint:
   - Header-bar is hidden
   - Nav-container moves to top: 0
   - Logo uses compact dimensions
   - Breadcrumb positions below nav only
   - All scroll states use same dimensions (nav doesn't shrink on mobile)

   This matches the parent theme's 768px breakpoint for consistency.
   ========================================================================== */

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

		/* Nav container: compact and consistent for both scroll states */
		--nav-container-min-height: 74px;
		--nav-container-min-height-scrolling: 74px;

		/* Logo: compact dimensions for BOTH scroll states
		   Prevents nav from expanding when scrolling back to top */
		--logo-height: 45px;
		--logo-width: 177px;
		--logo-margin: 15px 0 15px 8px;
		--logo-height-scrolling: 45px;
		--logo-width-scrolling: 177px;
		--logo-margin-scrolling: 15px 0 15px 8px;

		/* Positioning: breadcrumb sits below nav only (no header-bar) */
		--clear-header-height: 74px;
		--breadcrumb-top: 74px;
		--breadcrumb-top-scrolling: 74px;
	}
}