/**
 * TopLawyer Design Token System (Phase 3 Enterprise Specification)
 *
 * @package TopLawyer
 * @version 0.2.0
 */

:root {
	/* 1. Brand & Semantic Colors */
	--tl-color-primary: #0A192F;          /* Deep Executive Navy */
	--tl-color-primary-light: #112240;    /* Deep Navy Tint */
	--tl-color-primary-hover: #1B2D4B;
	--tl-color-secondary: #C5A059;        /* Warm Sovereign Gold */
	--tl-color-secondary-hover: #B38F46;  /* Deep Antique Gold */
	--tl-color-secondary-light: #FBF8F2;  /* Subtle Warm Gold Tint */
	--tl-color-gold-border: rgba(197, 160, 89, 0.28);
	--tl-color-accent: #1D4ED8;           /* Legal Trust Blue */
	--tl-color-accent-hover: #1E40AF;

	/* 2. Neutral Surfaces & Backgrounds */
	--tl-color-background: #F8FAFC;       /* Off-White Canvas */
	--tl-color-surface: #FFFFFF;          /* Pure White Container */
	--tl-color-surface-elevated: #FFFFFF; /* Lifted Modal / Dropdown */
	--tl-color-surface-subtle: #F1F5F9;   /* Neutral Pill Fill */
	--tl-color-surface-hover: #F8FAFC;    /* Subtle Row Highlight */

	/* 3. Text & Content Colors */
	--tl-color-text: #0F172A;             /* Slate 900 Primary Text */
	--tl-color-text-secondary: #334155;   /* Slate 700 Secondary Text */
	--tl-color-text-light: #FFFFFF;       /* High-contrast inverted text */
	--tl-color-text-on-dark: #CBD5E1;     /* High-contrast subtitle on navy */
	--tl-color-muted: #64748B;            /* Slate 500 Metadata Text */
	--tl-color-muted-light: #94A3B8;      /* Slate 400 Light Border/Icon */

	/* 4. Borders & Dividers */
	--tl-color-border: #E2E8F0;           /* Clean Structural Border */
	--tl-color-border-hover: #CBD5E1;     /* Interactive Hover Border */
	--tl-color-border-focus: #C5A059;     /* Gold Focus Outline */

	/* 5. Feedback & State Colors */
	--tl-color-success: #059669;          /* Verified Emerald Green */
	--tl-color-success-bg: #ECFDF5;
	--tl-color-warning: #D97706;          /* Advisory Amber */
	--tl-color-warning-bg: #FFFBEB;
	--tl-color-error: #DC2626;            /* Alert Crimson Red */
	--tl-color-error-bg: #FEF2F2;
	--tl-color-information: #0284C7;      /* Notice Sky Blue */
	--tl-color-information-bg: #F0F9FF;

	/* 6. Typography Families */
	--tl-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tl-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--tl-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* 7. Standardized Typography Scale */
	--tl-type-display: clamp(2.5rem, 5vw, 3.75rem);   /* 40px - 60px desktop */
	--tl-type-h1: clamp(2.125rem, 4vw, 3.25rem);       /* 34px - 52px */
	--tl-type-h2: clamp(1.75rem, 3vw, 2.5rem);         /* 28px - 40px */
	--tl-type-h3: clamp(1.375rem, 2vw, 1.625rem);      /* 22px - 26px */
	--tl-type-h4: 1.1875rem;                           /* 19px */
	--tl-type-body-large: 1.125rem;                    /* 18px */
	--tl-type-body: 1rem;                              /* 16px */
	--tl-type-body-small: 0.875rem;                    /* 14px */
	--tl-type-meta: 0.8125rem;                         /* 13px */
	--tl-type-caption: 0.75rem;                        /* 12px */
	--tl-type-label: 0.8125rem;                        /* 13px */
	--tl-type-button: 0.9375rem;                       /* 15px */

	/* 8. Consistent 8pt Spacing Grid */
	--tl-space-1: 0.5rem;    /* 8px */
	--tl-space-2: 1rem;      /* 16px */
	--tl-space-3: 1.5rem;    /* 24px */
	--tl-space-4: 2rem;      /* 32px */
	--tl-space-5: 3rem;      /* 48px */
	--tl-space-6: 4rem;      /* 64px */
	--tl-space-7: 5rem;      /* 80px */
	--tl-space-8: 6rem;      /* 96px */

	/* 9. Semantic Spacing Intervals */
	--tl-spacing-section: clamp(3rem, 6vw, 5rem);     /* Responsive section gap */
	--tl-spacing-card: var(--tl-space-3);             /* 24px card padding */
	--tl-spacing-stack: var(--tl-space-2);            /* 16px vertical stack */
	--tl-spacing-inline: var(--tl-space-1);           /* 8px horizontal cluster */

	/* 10. Unified Corner Radii Family */
	--tl-radius-sm: 6px;     /* Small elements, badges */
	--tl-radius-md: 10px;    /* Cards, buttons, inputs */
	--tl-radius-lg: 14px;    /* Major containers, hero cards */
	--tl-radius-pill: 9999px; /* Pill tags, circular avatars */

	/* 11. Subtle Elevation & Shadows */
	--tl-elevation-flat: none;
	--tl-elevation-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
	--tl-elevation-card: 0 2px 8px -1px rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.03);
	--tl-elevation-floating: 0 10px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
	--tl-elevation-modal: 0 20px 35px -5px rgba(15, 23, 42, 0.15);

	/* 12. Fluid Layout Max-Widths & Container Rules */
	--tl-container: 1240px;
	--tl-container-max: 1240px;
	--tl-container-padding: 32px;
	--tl-container-wide: 1400px;
	--tl-container-narrow: 840px;

	/* 13. Motion Timings & Easings */
	--tl-motion-instant: 0ms;
	--tl-motion-fast: 150ms;
	--tl-motion-normal: 250ms;
	--tl-motion-slow: 350ms;
	--tl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--tl-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--tl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 991px) {
	:root {
		--tl-container-padding: 24px;
	}
}

@media (max-width: 640px) {
	:root {
		--tl-container-padding: 20px;
	}
}

/* Accessible Reduced Motion Guarantee */
@media (prefers-reduced-motion: reduce) {
	:root {
		--tl-motion-fast: 0ms !important;
		--tl-motion-normal: 0ms !important;
		--tl-motion-slow: 0ms !important;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}