/**
 * CSS Custom Properties (Design Tokens)
 * Coach Dave Academy Theme
 *
 * This file defines all design tokens used throughout the theme.
 * Update values here to change the entire site's appearance.
 *
 * @package CoachDaveAcademy
 * @version 1.1.0
 */

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

	--color-primary: #fc0;
	--color-primary-hover: #f93;
	--color-primary-rgb: 255, 204, 0;

	--color-secondary: #A3C567;
	--color-secondary-hover: #93B25E;
	--color-secondary-rgb: 163, 197, 103;

	--color-accent: #5E2500;
	--color-accent-hover: #4a1d00;

	/* ==========================================================================
	   Neutral Colors
	   ========================================================================== */

	--color-white: #fff;
	--color-black: #000;

	/* Text Colors */
	--color-text: #323232;
	--color-text-light: #8f8f8f;
	--color-text-muted: #999;
	--color-text-inverse: #fff;

	/* Gray Scale */
	--color-gray-50: #f9f9f9;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #eee;
	--color-gray-300: #ddd;
	--color-gray-400: #ccc;
	--color-gray-500: #999;
	--color-gray-600: #8f8f8f;
	--color-gray-700: #777;
	--color-gray-800: #454545;
	--color-gray-900: #323232;

	/* ==========================================================================
	   Background Colors
	   ========================================================================== */

	--color-bg: #fff;
	--color-bg-light: #f5f5f5;
	--color-bg-lighter: #f9f9f9;
	--color-bg-dark: #454545;
	--color-bg-darker: #333;
	--color-bg-darkest: #1a1a1a;

	/* ==========================================================================
	   Border Colors
	   ========================================================================== */

	--color-border: #ddd;
	--color-border-light: #eee;
	--color-border-lighter: #f5f5f5;
	--color-border-dark: #ccc;
	--color-border-darker: #999;

	/* ==========================================================================
	   Status Colors
	   ========================================================================== */

	--color-error: #E2574C;
	--color-error-light: #fdf2f2;
	--color-error-dark: #c53030;

	--color-success: #A3C567;
	--color-success-light: #f0fff4;
	--color-success-dark: #276749;

	--color-warning: #fc0;
	--color-warning-light: #fffff0;
	--color-warning-dark: #b7791f;

	--color-info: #2EA2CC;
	--color-info-light: #ebf8ff;
	--color-info-dark: #2b6cb0;

	/* ==========================================================================
	   Overlay Colors
	   ========================================================================== */

	--overlay-lightest: rgba(0, 0, 0, 0.05);
	--overlay-light: rgba(0, 0, 0, 0.1);
	--overlay-medium-light: rgba(0, 0, 0, 0.2);
	--overlay-medium: rgba(0, 0, 0, 0.4);
	--overlay-medium-dark: rgba(0, 0, 0, 0.55);
	--overlay-dark: rgba(0, 0, 0, 0.7);
	--overlay-darkest: rgba(0, 0, 0, 0.85);

	--overlay-white-light: rgba(255, 255, 255, 0.1);
	--overlay-white-medium: rgba(255, 255, 255, 0.3);
	--overlay-white-heavy: rgba(255, 255, 255, 0.8);

	/* ==========================================================================
	   Typography
	   ========================================================================== */

	/* Font Families */
	--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-heading: var(--font-primary);
	--font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

	/* Font Sizes - Based on 62.5% root (1rem = 10px) */
	--text-xs: 1.1rem;    /* 11px */
	--text-sm: 1.2rem;    /* 12px */
	--text-base: 1.5rem;  /* 15px */
	--text-md: 1.6rem;    /* 16px */
	--text-lg: 1.8rem;    /* 18px */
	--text-xl: 2rem;      /* 20px */
	--text-2xl: 2.4rem;   /* 24px */
	--text-3xl: 3rem;     /* 30px */
	--text-4xl: 3.6rem;   /* 36px */
	--text-5xl: 4.5rem;   /* 45px */

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Font Weights */
	--font-thin: 100;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Letter Spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* ==========================================================================
	   Spacing Scale
	   Based on 4px base unit
	   ========================================================================== */

	--space-0: 0;
	--space-px: 1px;
	--space-0-5: 0.125rem;  /* 2px */
	--space-1: 0.25rem;     /* 4px */
	--space-1-5: 0.375rem;  /* 6px */
	--space-2: 0.5rem;      /* 8px */
	--space-2-5: 0.625rem;  /* 10px */
	--space-3: 0.75rem;     /* 12px */
	--space-3-5: 0.875rem;  /* 14px */
	--space-4: 1rem;        /* 16px */
	--space-5: 1.25rem;     /* 20px */
	--space-6: 1.5rem;      /* 24px */
	--space-7: 1.75rem;     /* 28px */
	--space-8: 2rem;        /* 32px */
	--space-9: 2.25rem;     /* 36px */
	--space-10: 2.5rem;     /* 40px */
	--space-11: 2.75rem;    /* 44px */
	--space-12: 3rem;       /* 48px */
	--space-14: 3.5rem;     /* 56px */
	--space-16: 4rem;       /* 64px */
	--space-20: 5rem;       /* 80px */
	--space-24: 6rem;       /* 96px */
	--space-28: 7rem;       /* 112px */
	--space-32: 8rem;       /* 128px */

	/* ==========================================================================
	   Border Radius
	   ========================================================================== */

	--radius-none: 0;
	--radius-sm: 2px;
	--radius-default: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-2xl: 16px;
	--radius-3xl: 24px;
	--radius-full: 9999px;

	/* ==========================================================================
	   Shadows
	   ========================================================================== */

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
	--shadow-none: none;

	/* ==========================================================================
	   Transitions
	   ========================================================================== */

	--transition-none: none;
	--transition-fast: 150ms ease;
	--transition-default: 200ms ease;
	--transition-slow: 300ms ease;
	--transition-slower: 500ms ease;

	/* Specific transitions */
	--transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
	--transition-opacity: opacity 200ms ease;
	--transition-transform: transform 200ms ease;
	--transition-all: all 200ms ease;

	/* ==========================================================================
	   Z-Index Scale
	   ========================================================================== */

	--z-behind: -1;
	--z-base: 0;
	--z-raised: 1;
	--z-dropdown: 10;
	--z-sticky: 100;
	--z-fixed: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-popover: 500;
	--z-tooltip: 600;
	--z-max: 9999;

	/* ==========================================================================
	   Layout
	   ========================================================================== */

	/* Container widths */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1080px;
	--container-2xl: 1280px;

	/* Content width (for readability) */
	--content-width: 660px;
	--content-width-wide: 1080px;

	/* Gutters */
	--gutter: var(--space-4);
	--gutter-sm: var(--space-2);
	--gutter-lg: var(--space-6);

	/* ==========================================================================
	   Breakpoints (for reference - use in media queries)
	   ========================================================================== */

	/*
	 * Mobile first breakpoints:
	 * --bp-sm: 480px   (large phones)
	 * --bp-md: 768px   (tablets)
	 * --bp-lg: 1024px  (laptops)
	 * --bp-xl: 1280px  (desktops)
	 * --bp-2xl: 1536px (large desktops)
	 */

	/* ==========================================================================
	   Component-Specific Variables
	   ========================================================================== */

	/* Buttons */
	--btn-padding-x: var(--space-4);
	--btn-padding-y: var(--space-2-5);
	--btn-font-size: var(--text-sm);
	--btn-font-weight: var(--font-semibold);
	--btn-radius: var(--radius-default);
	--btn-transition: var(--transition-colors);

	/* Forms */
	--input-padding-x: var(--space-3);
	--input-padding-y: var(--space-2-5);
	--input-font-size: var(--text-base);
	--input-radius: var(--radius-default);
	--input-border-color: var(--color-border);
	--input-border-width: 1px;
	--input-focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);

	/* Cards */
	--card-padding: var(--space-6);
	--card-radius: var(--radius-lg);
	--card-shadow: var(--shadow-default);
	--card-border: 1px solid var(--color-border-light);

	/* Header */
	--header-height: 80px;
	--header-height-mobile: 60px;
	--header-bg: var(--color-white);
	--header-border: 1px solid var(--color-border-light);

	/* Footer */
	--footer-bg: var(--color-bg-dark);
	--footer-text: var(--color-text-inverse);
}

/* ==========================================================================
   Dark Mode Support (optional - for future use)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root.auto-dark {
		--color-text: #e5e5e5;
		--color-text-light: #a3a3a3;
		--color-bg: #1a1a1a;
		--color-bg-light: #262626;
		--color-bg-lighter: #333;
		--color-border: #404040;
		--color-border-light: #333;
	}
}