/* Plus Jakarta Sans - Material 3 Typography */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

@import 'tailwindcss';

@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme {
	--color-background: var(--md-sys-color-surface);
	--color-foreground: var(--md-sys-color-on-surface);
	--color-popover: var(--md-sys-color-surface-container);
	--color-popover-foreground: var(--md-sys-color-on-surface);
	--color-muted-foreground: var(--md-sys-color-on-surface-variant);
	--color-accent: var(--md-sys-color-tertiary-container);
	--color-accent-foreground: var(--md-sys-color-on-tertiary-container);
	--color-destructive: var(--md-sys-color-error);
	--color-border: var(--md-sys-color-outline-variant);
	--color-input: var(--md-sys-color-surface-container-highest);
	--color-ring: var(--md-sys-color-primary);

	--radius-xs: var(--md-sys-shape-corner-extra-small);
	--radius-sm: var(--md-sys-shape-corner-small);
	--radius-md: var(--md-sys-shape-corner-medium);
	--radius-lg: var(--md-sys-shape-corner-large);
	--radius-xl: var(--md-sys-shape-corner-extra-large);
	--radius-full: var(--md-sys-shape-corner-full);
}

/* ============================================
   MATERIAL YOU DESIGN SYSTEM - CSS TOKENS
   ============================================ */

:root {
	/* ============================================
     SURFACE COLORS
     ============================================ */
	--md-sys-color-surface: #141218;
	--md-sys-color-surface-variant: #49454f;
	--md-sys-color-on-surface: #e6e0e9;
	--md-sys-color-on-surface-variant: #cac4d0;
	--md-sys-color-outline: #938f99;
	--md-sys-color-outline-variant: #49454f;
	--md-sys-color-surface-container: #211f26;
	--md-sys-color-surface-container-low: #1c191c;
	--md-sys-color-surface-container-high: #2b2930;
	--md-sys-color-surface-container-highest: #36343b;

	/* ============================================
     PRIMARY COLORS (Amber/Cinematic Warmth)
     ============================================ */
	--md-sys-color-primary: #f3bc00;
	--md-sys-color-on-primary: #3f2e00;
	--md-sys-color-primary-container: #5c4500;
	--md-sys-color-on-primary-container: #ffe08f;

	/* ============================================
     SECONDARY COLORS
     ============================================ */
	--md-sys-color-secondary: #d0c1a5;
	--md-sys-color-on-secondary: #363016;
	--md-sys-color-secondary-container: #4e462a;
	--md-sys-color-on-secondary-container: #edddbf;

	/* ============================================
     TERTIARY COLORS
     ============================================ */
	--md-sys-color-tertiary: #b0cfba;
	--md-sys-color-on-tertiary: #1c3526;
	--md-sys-color-tertiary-container: #324b3b;
	--md-sys-color-on-tertiary-container: #cbebd6;

	/* ============================================
     ERROR COLORS
     ============================================ */
	--md-sys-color-error: #ffb4ab;
	--md-sys-color-on-error: #690005;
	--md-sys-color-error-container: #93000a;
	--md-sys-color-on-error-container: #ffdad6;

	/* ============================================
     INVERSE COLORS
     ============================================ */
	--md-sys-color-inverse-surface: #e6e0e9;
	--md-sys-color-on-inverse-surface: #322f35;
	--md-sys-color-inverse-primary: #7a5900;

	/* ============================================
     SCRIM & SHADOW
     ============================================ */
	--md-sys-color-scrim: #000000;
	--md-sys-color-shadow: #000000;
	--md-sys-color-surface-tint: #f3bc00;

	/* ============================================
     SURFACE TINT OVERLAYS (Material 3 Elevation)
     ============================================ */
	--md-sys-elevation-level1: rgba(243, 188, 0, 0.05);
	--md-sys-elevation-level2: rgba(243, 188, 0, 0.08);
	--md-sys-elevation-level3: rgba(243, 188, 0, 0.11);
	--md-sys-elevation-level4: rgba(243, 188, 0, 0.12);
	--md-sys-elevation-level5: rgba(243, 188, 0, 0.14);

	/* ============================================
     SHAPE (Corner Radius Tokens)
     ============================================ */
	--md-sys-shape-corner-none: 0px;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 8px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-full: 9999px;

	/* ============================================
     TYPOGRAPHY (Plus Jakarta Sans Scale)
     ============================================ */
	--md-sys-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

	/* Display */
	--md-sys-typescale-display-large-size: 57px;
	--md-sys-typescale-display-large-line-height: 64px;
	--md-sys-typescale-display-large-weight: 600;
	--md-sys-typescale-display-large-letter-spacing: -0.25px;

	--md-sys-typescale-display-medium-size: 45px;
	--md-sys-typescale-display-medium-line-height: 52px;
	--md-sys-typescale-display-medium-weight: 600;
	--md-sys-typescale-display-medium-letter-spacing: 0px;

	--md-sys-typescale-display-small-size: 36px;
	--md-sys-typescale-display-small-line-height: 44px;
	--md-sys-typescale-display-small-weight: 600;
	--md-sys-typescale-display-small-letter-spacing: 0px;

	/* Headline */
	--md-sys-typescale-headline-large-size: 32px;
	--md-sys-typescale-headline-large-line-height: 40px;
	--md-sys-typescale-headline-large-weight: 600;
	--md-sys-typescale-headline-large-letter-spacing: 0px;

	--md-sys-typescale-headline-medium-size: 28px;
	--md-sys-typescale-headline-medium-line-height: 36px;
	--md-sys-typescale-headline-medium-weight: 600;
	--md-sys-typescale-headline-medium-letter-spacing: 0px;

	--md-sys-typescale-headline-small-size: 24px;
	--md-sys-typescale-headline-small-line-height: 32px;
	--md-sys-typescale-headline-small-weight: 600;
	--md-sys-typescale-headline-small-letter-spacing: 0px;

	/* Title */
	--md-sys-typescale-title-large-size: 22px;
	--md-sys-typescale-title-large-line-height: 28px;
	--md-sys-typescale-title-large-weight: 600;
	--md-sys-typescale-title-large-letter-spacing: 0px;

	--md-sys-typescale-title-medium-size: 16px;
	--md-sys-typescale-title-medium-line-height: 24px;
	--md-sys-typescale-title-medium-weight: 600;
	--md-sys-typescale-title-medium-letter-spacing: 0.15px;

	--md-sys-typescale-title-small-size: 14px;
	--md-sys-typescale-title-small-line-height: 20px;
	--md-sys-typescale-title-small-weight: 600;
	--md-sys-typescale-title-small-letter-spacing: 0.1px;

	/* Body */
	--md-sys-typescale-body-large-size: 16px;
	--md-sys-typescale-body-large-line-height: 24px;
	--md-sys-typescale-body-large-weight: 400;
	--md-sys-typescale-body-large-letter-spacing: 0.5px;

	--md-sys-typescale-body-medium-size: 14px;
	--md-sys-typescale-body-medium-line-height: 20px;
	--md-sys-typescale-body-medium-weight: 400;
	--md-sys-typescale-body-medium-letter-spacing: 0.25px;

	--md-sys-typescale-body-small-size: 12px;
	--md-sys-typescale-body-small-line-height: 16px;
	--md-sys-typescale-body-small-weight: 400;
	--md-sys-typescale-body-small-letter-spacing: 0.4px;

	/* Label */
	--md-sys-typescale-label-large-size: 14px;
	--md-sys-typescale-label-large-line-height: 20px;
	--md-sys-typescale-label-large-weight: 600;
	--md-sys-typescale-label-large-letter-spacing: 0.1px;

	--md-sys-typescale-label-medium-size: 12px;
	--md-sys-typescale-label-medium-line-height: 16px;
	--md-sys-typescale-label-medium-weight: 600;
	--md-sys-typescale-label-medium-letter-spacing: 0.5px;

	--md-sys-typescale-label-small-size: 11px;
	--md-sys-typescale-label-small-line-height: 16px;
	--md-sys-typescale-label-small-weight: 600;
	--md-sys-typescale-label-small-letter-spacing: 0.5px;

	/* ============================================
     MOTION (Easing & Duration)
     ============================================ */
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0, 0, 0.2, 1);
	--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 1, 1);
	--md-sys-motion-duration-short1: 50ms;
	--md-sys-motion-duration-short2: 100ms;
	--md-sys-motion-duration-short3: 150ms;
	--md-sys-motion-duration-short4: 200ms;
	--md-sys-motion-duration-medium1: 250ms;
	--md-sys-motion-duration-medium2: 300ms;
	--md-sys-motion-duration-medium3: 350ms;
	--md-sys-motion-duration-medium4: 400ms;
	--md-sys-motion-duration-long1: 450ms;
	--md-sys-motion-duration-long2: 500ms;
	--md-sys-motion-duration-long3: 550ms;
	--md-sys-motion-duration-long4: 600ms;

}

/* ============================================
   BASE STYLES
   ============================================ */

body {
	font-family: var(--md-sys-font-family);
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

/* ============================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================ */

.md-display-large {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-display-large-size);
	line-height: var(--md-sys-typescale-display-large-line-height);
	font-weight: var(--md-sys-typescale-display-large-weight);
	letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
}

.md-display-medium {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-display-medium-size);
	line-height: var(--md-sys-typescale-display-medium-line-height);
	font-weight: var(--md-sys-typescale-display-medium-weight);
	letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
}

.md-display-small {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-display-small-size);
	line-height: var(--md-sys-typescale-display-small-line-height);
	font-weight: var(--md-sys-typescale-display-small-weight);
	letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
}

.md-headline-large {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-headline-large-size);
	line-height: var(--md-sys-typescale-headline-large-line-height);
	font-weight: var(--md-sys-typescale-headline-large-weight);
	letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
}

.md-headline-medium {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-headline-medium-size);
	line-height: var(--md-sys-typescale-headline-medium-line-height);
	font-weight: var(--md-sys-typescale-headline-medium-weight);
	letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
}

.md-headline-small {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
	letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
}

.md-title-large {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-title-large-size);
	line-height: var(--md-sys-typescale-title-large-line-height);
	font-weight: var(--md-sys-typescale-title-large-weight);
	letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.md-title-medium {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-title-medium-size);
	line-height: var(--md-sys-typescale-title-medium-line-height);
	font-weight: var(--md-sys-typescale-title-medium-weight);
	letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.md-title-small {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-title-small-size);
	line-height: var(--md-sys-typescale-title-small-line-height);
	font-weight: var(--md-sys-typescale-title-small-weight);
	letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
}

.md-body-large {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-body-large-size);
	line-height: var(--md-sys-typescale-body-large-line-height);
	font-weight: var(--md-sys-typescale-body-large-weight);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.md-body-medium {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
	font-weight: var(--md-sys-typescale-body-medium-weight);
	letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.md-body-small {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-body-small-size);
	line-height: var(--md-sys-typescale-body-small-line-height);
	font-weight: var(--md-sys-typescale-body-small-weight);
	letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
}

.md-label-large {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.md-label-medium {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-label-medium-size);
	line-height: var(--md-sys-typescale-label-medium-line-height);
	font-weight: var(--md-sys-typescale-label-medium-weight);
	letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

.md-label-small {
	font-family: var(--md-sys-font-family);
	font-size: var(--md-sys-typescale-label-small-size);
	line-height: var(--md-sys-typescale-label-small-line-height);
	font-weight: var(--md-sys-typescale-label-small-weight);
	letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

/* ============================================
   RIPPLE EFFECT UTILITY
   ============================================ */

.md-ripple {
	position: relative;
	overflow: hidden;
}

.md-ripple::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(
		circle,
		var(--md-sys-color-on-surface) 0%,
		transparent 70%
	);
	opacity: 0;
	transform: translate(-50%, -50%);
	transition:
		width 0.4s var(--md-sys-motion-easing-standard),
		height 0.4s var(--md-sys-motion-easing-standard),
		opacity 0.4s var(--md-sys-motion-easing-standard);
	pointer-events: none;
}

.md-ripple:active::after {
	width: 200%;
	height: 200%;
	opacity: 0.12;
}

/* ============================================
   ELEVATION SURFACE TINTS
   ============================================ */

.md-elevation-0 {
	background-color: var(--md-sys-color-surface);
}

.md-elevation-1 {
	background-color: var(--md-sys-elevation-level1);
	box-shadow:
		0 1px 3px 1px rgba(0, 0, 0, 0.15),
		0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.md-elevation-2 {
	background-color: var(--md-sys-elevation-level2);
	box-shadow:
		0 2px 6px 2px rgba(0, 0, 0, 0.15),
		0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.md-elevation-3 {
	background-color: var(--md-sys-elevation-level3);
	box-shadow:
		0 4px 8px 3px rgba(0, 0, 0, 0.15),
		0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.md-elevation-4 {
	background-color: var(--md-sys-elevation-level4);
	box-shadow:
		0 6px 10px 4px rgba(0, 0, 0, 0.15),
		0 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.md-elevation-5 {
	background-color: var(--md-sys-elevation-level5);
	box-shadow:
		0 8px 12px 6px rgba(0, 0, 0, 0.15),
		0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================
   STATE LAYERS
   ============================================ */

.md-state-hover {
	background-color: color-mix(
		in srgb,
		var(--md-sys-color-on-surface) 8%,
		transparent
	);
}

.md-state-focus {
	background-color: color-mix(
		in srgb,
		var(--md-sys-color-on-surface) 12%,
		transparent
	);
}

.md-state-pressed {
	background-color: color-mix(
		in srgb,
		var(--md-sys-color-on-surface) 12%,
		transparent
	);
}

.md-state-drag {
	background-color: color-mix(
		in srgb,
		var(--md-sys-color-on-surface) 16%,
		transparent
	);
}

/* ============================================
   TAILWIND THEME CONFIGURATION
   ============================================ */

@layer base {
	* {
		border-color: var(--md-sys-color-outline-variant);
	}
}