/**
 * NoCorte Design Tokens
 *
 * NUNCA hardcodeie cores, espaçamentos ou tipografia.
 * SEMPRE use var(--token-name) para todos os valores.
 *
 * @package VimeNocorte
 */

:root {
	/* ==================== COLORS ==================== */

	/* Brand Colors */
	--color-brand-primary: #5C13E6;
	--color-brand-primary-hover: #4A0FB8;
	--color-brand-primary-active: #3B0C93;
	--color-brand-accent: #C3F85F;
	--color-brand-accent-hover: #B0E854;
	--color-brand-accent-active: #9DD749;

	/* UI Background */
	--color-ui-bg: #0F1115;
	--color-ui-bg-elevated: #1A1D24;
	--color-ui-bg-card: #23262F;
	--color-ui-bg-hover: #2C3038;

	/* UI Borders */
	--color-ui-border: #353945;
	--color-ui-border-hover: #4A4F5E;
	--color-ui-border-focus: var(--color-brand-primary);

	/* Text Colors */
	--color-text-primary: #FCFCFD;
	--color-text-secondary: #B1B5C3;
	--color-text-tertiary: #777E90;
	--color-text-disabled: #4A4F5E;
	--color-text-on-primary: #FCFCFD;
	--color-text-on-accent: #0F1115;

	/* Semantic Colors */
	--color-success: #58BD7D;
	--color-success-bg: rgba(88, 189, 125, 0.1);
	--color-error: #EF466F;
	--color-error-bg: rgba(239, 70, 111, 0.1);
	--color-warning: #FFB300;
	--color-warning-bg: rgba(255, 179, 0, 0.1);
	--color-info: #3772FF;
	--color-info-bg: rgba(55, 114, 255, 0.1);

	/* Chart/Data Visualization */
	--color-chart-1: var(--color-brand-primary);
	--color-chart-2: var(--color-brand-accent);
	--color-chart-3: #9757D7;
	--color-chart-4: #45B26B;
	--color-chart-5: #FF6838;

	/* Status Colors */
	--color-status-preliminar: var(--color-warning);
	--color-status-oficial: var(--color-success);
	--color-status-coletando: var(--color-info);

	/* ==================== SPACING ==================== */

	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* ==================== TYPOGRAPHY ==================== */

	/* Font Families */
	--font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

	/* Font Sizes */
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */
	--font-size-5xl: 3rem;      /* 48px */

	/* Font Weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* Letter Spacing */
	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.02em;

	/* ==================== BORDERS ==================== */

	--border-radius-sm: 4px;
	--border-radius-base: 8px;
	--border-radius-md: 12px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;
	--border-radius-full: 9999px;

	--border-width-thin: 1px;
	--border-width-base: 2px;
	--border-width-thick: 4px;

	/* ==================== SHADOWS ==================== */

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	--shadow-base: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	--shadow-md: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 16px 32px 0 rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 24px 48px 0 rgba(0, 0, 0, 0.6);

	/* Glow Effects */
	--shadow-glow-primary: 0 0 24px rgba(92, 19, 230, 0.5);
	--shadow-glow-accent: 0 0 24px rgba(195, 248, 95, 0.5);
	--shadow-glow-success: 0 0 24px rgba(88, 189, 125, 0.5);
	--shadow-glow-error: 0 0 24px rgba(239, 70, 111, 0.5);

	/* ==================== Z-INDEX ==================== */

	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* ==================== MOTION ==================== */

	/* Durations */
	--motion-duration-instant: 100ms;
	--motion-duration-fast: 200ms;
	--motion-duration-base: 300ms;
	--motion-duration-slow: 400ms;
	--motion-duration-slower: 600ms;

	/* Easing */
	--motion-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ==================== BREAKPOINTS (for reference) ==================== */

	/*
	 * Use these in media queries:
	 * --breakpoint-sm: 640px
	 * --breakpoint-md: 768px
	 * --breakpoint-lg: 1024px
	 * --breakpoint-xl: 1280px
	 * --breakpoint-2xl: 1536px
	 */

	/* ==================== LAYOUT ==================== */

	--container-max-width: 1280px;
	--content-max-width: 720px;
	--sidebar-width: 280px;

	/* ==================== FORMS ==================== */

	--input-height-sm: 32px;
	--input-height-base: 40px;
	--input-height-lg: 48px;

	--input-padding-x: var(--space-4);
	--input-padding-y: var(--space-2);

	/* ==================== BUTTONS ==================== */

	--button-height-sm: 32px;
	--button-height-base: 40px;
	--button-height-lg: 48px;

	--button-padding-x-sm: var(--space-3);
	--button-padding-x-base: var(--space-4);
	--button-padding-x-lg: var(--space-6);

	/* ==================== OPACITY ==================== */

	--opacity-disabled: 0.4;
	--opacity-muted: 0.6;
	--opacity-subtle: 0.8;
	--opacity-overlay: 0.9;
}

/* ==================== BASE RESETS ==================== */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	background-color: var(--color-ui-bg);
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus visible styles */
*:focus-visible {
	outline: var(--border-width-base) solid var(--color-brand-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-brand-primary);
	color: var(--color-text-on-primary);
	border-radius: var(--border-radius-base);
	text-decoration: none;
	z-index: var(--z-tooltip);
	transform: translateY(-200%);
	transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.skip-to-content:focus {
	transform: translateY(0);
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ==================== UTILITIES ==================== */

/* Visually hidden but accessible */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Prevent text selection */
.no-select {
	user-select: none;
}

/* Truncate text with ellipsis */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}