/**
 * Material Design 3 Design Tokens
 * 
 * This file contains all design tokens for the Sånn Admin application.
 * Based on Material Design 3 specifications, adapted for light mode.
 * 
 * Structure:
 * - Color System (Primary, Secondary, Tertiary, Error, Neutral)
 * - Typography Scale
 * - Spacing System
 * - Elevation/Shadows
 * - Shape/Corner Radius
 * - Motion/Animation
 */

:root {
	/* ============================================
	   COLOR SYSTEM - PRIMARY
	   ============================================ */

	/* Primary Color: Orange (#f7941d) */
	--md-sys-color-primary: #f7941d;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #ffe0b2;
	--md-sys-color-on-primary-container: #b56200;

	/* Primary Variants */
	--md-sys-color-primary-light: #ffb84d;
	--md-sys-color-primary-dark: #b56200;

	/* ============================================
	   COLOR SYSTEM - SECONDARY
	   ============================================ */

	/* Secondary Color: Dark Blue (#30465e) */
	--md-sys-color-secondary: #30465e;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #e3e8ed;
	--md-sys-color-on-secondary-container: #1a2a3a;

	/* Secondary Variants */
	--md-sys-color-secondary-light: #36577a;
	--md-sys-color-secondary-dark: #1a2a3a;

	/* ============================================
	   COLOR SYSTEM - TERTIARY (Optional)
	   ============================================ */

	/* Tertiary Color: Blue (#4490ff) - used for theme colors */
	--md-sys-color-tertiary: #4490ff;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #d6e7ff;
	--md-sys-color-on-tertiary-container: #003d7a;

	/* ============================================
	   COLOR SYSTEM - ERROR
	   ============================================ */

	/* Error Color: Red */
	--md-sys-color-error: #ba1a1a;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-error-container: #ffdad6;
	--md-sys-color-on-error-container: #410002;

	/* Error Variants */
	--md-sys-color-error-light: #de3730;
	--md-sys-color-error-dark: #93000a;

	/* ============================================
	   COLOR SYSTEM - NEUTRAL/SURFACE
	   ============================================ */

	/* Background */
	--md-sys-color-background: #ffffff;
	--md-sys-color-on-background: #1a1a1a;

	/* Surface */
	--md-sys-color-surface: #ffffff;
	--md-sys-color-on-surface: #1a1a1a;
	--md-sys-color-surface-variant: #f5f5f5;
	--md-sys-color-on-surface-variant: #424242;

	/* Surface Container (for elevated surfaces) */
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #fafafa;
	--md-sys-color-surface-container: #f5f5f5;
	--md-sys-color-surface-container-high: #eeeeee;
	--md-sys-color-surface-container-highest: #e0e0e0;

	/* Outline */
	--md-sys-color-outline: #757575;
	--md-sys-color-outline-variant: #bdbdbd;

	/* Inverse */
	--md-sys-color-inverse-surface: #2f2f2f;
	--md-sys-color-inverse-on-surface: #f5f5f5;
	--md-sys-color-inverse-primary: #ffb84d;

	/* ============================================
	   COLOR SYSTEM - STATE LAYERS
	   ============================================ */

	/* State layer opacity values (for hover, pressed, focus) */
	--md-sys-state-hover: rgba(0, 0, 0, 0.08);
	--md-sys-state-focus: rgba(0, 0, 0, 0.12);
	--md-sys-state-pressed: rgba(0, 0, 0, 0.12);
	--md-sys-state-drag: rgba(0, 0, 0, 0.16);
	--md-sys-state-disabled: rgba(0, 0, 0, 0.38);

	/* State layers for light surfaces */
	--md-sys-state-hover-light: rgba(255, 255, 255, 0.08);
	--md-sys-state-focus-light: rgba(255, 255, 255, 0.12);
	--md-sys-state-pressed-light: rgba(255, 255, 255, 0.12);

	/* ============================================
	   UI ACTION COLORS (Neutral - Space Color Independent)
	   ============================================ */

	/* 
	 * These colors are used for UI actions (buttons, chips, etc.)
	 * They are intentionally neutral to avoid clashing with 
	 * user-chosen space colors.
	 */

	/* Action Primary - Dark slate/charcoal for main actions */
	--md-sys-color-action: #374151;
	--md-sys-color-on-action: #ffffff;
	--md-sys-color-action-hover: #1f2937;
	--md-sys-color-action-container: #e5e7eb;
	--md-sys-color-on-action-container: #1f2937;

	/* Action Secondary - Lighter slate for secondary actions */
	--md-sys-color-action-secondary: #6b7280;
	--md-sys-color-on-action-secondary: #ffffff;
	--md-sys-color-action-secondary-hover: #4b5563;

	/* Action Outline - For outlined buttons */
	--md-sys-color-action-outline: #9ca3af;
	--md-sys-color-action-outline-hover: #6b7280;

	/* Selection/Active States */
	--md-sys-color-selection: #e5e7eb;
	--md-sys-color-on-selection: #1f2937;
	--md-sys-color-selection-indicator: #374151;

	/* Link Colors - Neutral, relies on bold weight for distinction */
	--md-sys-color-link: var(--md-sys-color-on-surface);
	--md-sys-color-link-hover: var(--md-sys-color-action);
	--md-sys-color-link-visited: var(--md-sys-color-on-surface);

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

	/* Font Family */
	--md-sys-typescale-font-family-name: 'Lato', sans-serif;
	--md-sys-typescale-font-family-style: Regular;

	/* Display (Large headlines, hero text) */
	--md-sys-typescale-display-large-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-display-large-line-height: 64px;
	--md-sys-typescale-display-large-size: 57px;
	--md-sys-typescale-display-large-weight: 400;
	--md-sys-typescale-display-large-tracking: -0.25px;

	--md-sys-typescale-display-medium-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-display-medium-line-height: 52px;
	--md-sys-typescale-display-medium-size: 45px;
	--md-sys-typescale-display-medium-weight: 400;
	--md-sys-typescale-display-medium-tracking: 0;

	--md-sys-typescale-display-small-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-display-small-line-height: 44px;
	--md-sys-typescale-display-small-size: 36px;
	--md-sys-typescale-display-small-weight: 400;
	--md-sys-typescale-display-small-tracking: 0;

	/* Headline (Section headers) */
	--md-sys-typescale-headline-large-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-headline-large-line-height: 40px;
	--md-sys-typescale-headline-large-size: 32px;
	--md-sys-typescale-headline-large-weight: 400;
	--md-sys-typescale-headline-large-tracking: 0;

	--md-sys-typescale-headline-medium-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-headline-medium-line-height: 36px;
	--md-sys-typescale-headline-medium-size: 28px;
	--md-sys-typescale-headline-medium-weight: 400;
	--md-sys-typescale-headline-medium-tracking: 0;

	--md-sys-typescale-headline-small-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-headline-small-line-height: 32px;
	--md-sys-typescale-headline-small-size: 24px;
	--md-sys-typescale-headline-small-weight: 400;
	--md-sys-typescale-headline-small-tracking: 0;

	/* Title (Card titles, dialog titles) */
	--md-sys-typescale-title-large-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-title-large-line-height: 28px;
	--md-sys-typescale-title-large-size: 22px;
	--md-sys-typescale-title-large-weight: 400;
	--md-sys-typescale-title-large-tracking: 0;

	--md-sys-typescale-title-medium-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-title-medium-line-height: 24px;
	--md-sys-typescale-title-medium-size: 16px;
	--md-sys-typescale-title-medium-weight: 500;
	--md-sys-typescale-title-medium-tracking: 0.15px;

	--md-sys-typescale-title-small-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-title-small-line-height: 20px;
	--md-sys-typescale-title-small-size: 14px;
	--md-sys-typescale-title-small-weight: 500;
	--md-sys-typescale-title-small-tracking: 0.1px;

	/* Body (Main content) */
	--md-sys-typescale-body-large-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-body-large-line-height: 24px;
	--md-sys-typescale-body-large-size: 16px;
	--md-sys-typescale-body-large-weight: 400;
	--md-sys-typescale-body-large-tracking: 0.5px;

	--md-sys-typescale-body-medium-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-body-medium-line-height: 20px;
	--md-sys-typescale-body-medium-size: 14px;
	--md-sys-typescale-body-medium-weight: 400;
	--md-sys-typescale-body-medium-tracking: 0.25px;

	--md-sys-typescale-body-small-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-body-small-line-height: 16px;
	--md-sys-typescale-body-small-size: 12px;
	--md-sys-typescale-body-small-weight: 400;
	--md-sys-typescale-body-small-tracking: 0.4px;

	/* Label (Buttons, form labels) */
	--md-sys-typescale-label-large-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-label-large-line-height: 20px;
	--md-sys-typescale-label-large-size: 14px;
	--md-sys-typescale-label-large-weight: 500;
	--md-sys-typescale-label-large-tracking: 0.1px;

	--md-sys-typescale-label-xlarge-size: 20px;
	--md-sys-typescale-label-xlarge-line-height: 24px;
	--md-sys-typescale-label-xlarge-weight: 500;
	--md-sys-typescale-label-xlarge-tracking: 0.1px;

	--md-sys-typescale-label-medium-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-label-medium-line-height: 16px;
	--md-sys-typescale-label-medium-size: 12px;
	--md-sys-typescale-label-medium-weight: 500;
	--md-sys-typescale-label-medium-tracking: 0.5px;

	--md-sys-typescale-label-small-font: var(
		--md-sys-typescale-font-family-name
	);
	--md-sys-typescale-label-small-line-height: 16px;
	--md-sys-typescale-label-small-size: 11px;
	--md-sys-typescale-label-small-weight: 500;
	--md-sys-typescale-label-small-tracking: 0.5px;

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

	/* Base spacing unit: 4px */
	--md-sys-spacing-0: 0;
	--md-sys-spacing-1: 4px;
	--md-sys-spacing-2: 8px;
	--md-sys-spacing-3: 12px;
	--md-sys-spacing-4: 16px;
	--md-sys-spacing-5: 20px;
	--md-sys-spacing-6: 24px;
	--md-sys-spacing-7: 28px;
	--md-sys-spacing-8: 32px;
	--md-sys-spacing-9: 36px;
	--md-sys-spacing-10: 40px;
	--md-sys-spacing-12: 48px;
	--md-sys-spacing-16: 64px;
	--md-sys-spacing-20: 80px;
	--md-sys-spacing-24: 96px;

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

	/* Elevation levels (0-5) */
	--md-sys-elevation-0: none;
	--md-sys-elevation-1:
		0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-2:
		0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-3:
		0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-4:
		0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-5:
		0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

	/* Surface tint color for elevation */
	--md-sys-elevation-surface-tint-color: rgba(0, 0, 0, 0.05);

	/* ============================================
	   SHAPE / CORNER RADIUS
	   ============================================ */

	/* Corner radius values */
	--md-sys-shape-corner-none: 0;
	--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;

	/* Component-specific corner radius */
	--md-sys-shape-corner-button: var(
		--md-sys-shape-corner-extra-small
	); /* 4px - matches original design */
	--md-sys-shape-corner-card: var(--md-sys-shape-corner-medium);
	--md-sys-shape-corner-dialog: var(--md-sys-shape-corner-large);
	--md-sys-shape-corner-fab: var(--md-sys-shape-corner-large);
	--md-sys-shape-corner-sheet: var(--md-sys-shape-corner-large);

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

	/* Duration */
	--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;
	--md-sys-motion-duration-extra-long1: 700ms;
	--md-sys-motion-duration-extra-long2: 800ms;
	--md-sys-motion-duration-extra-long3: 900ms;
	--md-sys-motion-duration-extra-long4: 1000ms;

	/* Easing curves */
	--md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
	--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
	--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(
		0.3,
		0,
		0.8,
		0.15
	);
	--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(
		0.05,
		0.7,
		0.1,
		1
	);

	/* Common transitions */
	--md-sys-motion-transition-standard: var(--md-sys-motion-duration-medium2)
		var(--md-sys-motion-easing-standard);
	--md-sys-motion-transition-emphasized: var(--md-sys-motion-duration-medium4)
		var(--md-sys-motion-easing-emphasized);

	/* ============================================
	   COMPONENT-SPECIFIC TOKENS
	   ============================================ */

	/* Button */
	--md-sys-button-height: 40px;
	--md-sys-button-padding-horizontal: 24px;
	--md-sys-button-padding-vertical: 10px;
	--md-sys-button-min-width: 64px;

	/* Input/Text Field */
	--md-sys-input-height: 56px;
	--md-sys-input-padding-horizontal: 16px;
	--md-sys-input-padding-vertical: 16px;
	--md-sys-input-border-radius: var(--md-sys-shape-corner-small);

	/* Card */
	--md-sys-card-padding: var(--md-sys-spacing-6);
	--md-sys-card-elevation: var(--md-sys-elevation-1);

	/* Dialog */
	--md-sys-dialog-padding: var(--md-sys-spacing-6);
	--md-sys-dialog-max-width: 560px;
	--md-sys-dialog-elevation: var(--md-sys-elevation-3);

	/* Content Container */
	--md-sys-content-max-width: 800px;
	--md-sys-content-max-width-wide: 1400px;
	--md-sys-content-max-width-narrow: 560px;

	/* Navigation Drawer */
	--md-sys-drawer-width: 256px;
	--md-sys-drawer-width-mini: 80px;
	--md-sys-drawer-elevation: var(--md-sys-elevation-1);

	/* Top App Bar */
	--md-sys-app-bar-height: 64px;
	--md-sys-app-bar-elevation: var(--md-sys-elevation-2);

	/* Table */
	--md-sys-table-row-height: 40px; /* More compact default */
	--md-sys-table-header-height: 48px; /* Slightly reduced header */
	--md-sys-table-cell-padding: var(
		--md-sys-spacing-2
	); /* 12px - more compact */

	/* ============================================
	   LEGACY COLOR MAPPINGS (for gradual migration)
	   ============================================ */

	/* These map old color values to new tokens for backward compatibility */
	--legacy-primary: var(--md-sys-color-primary);
	--legacy-primary-dark: var(--md-sys-color-primary-dark);
	--legacy-secondary: var(--md-sys-color-secondary);
	--legacy-secondary-light: var(--md-sys-color-secondary-light);
	--legacy-link: var(--md-sys-color-primary);
	--legacy-background: var(--md-sys-color-background);
	--legacy-text: var(--md-sys-color-on-background);
	--legacy-border: var(--md-sys-color-outline-variant);
	--legacy-disabled: var(--md-sys-color-on-surface);
	--legacy-disabled-opacity: 0.38;
}