/* ==========================================================================
   Microsoft Fluent Design 2 - Design System Tokens (base/variables.css)
   Contains all Fluent 2 Tokens, Aliases, and Theme Overrides
   ========================================================================== */

:root {
  /* --- Typography Tokens (Fluent 2 Scale) --- */
  --fontFamilyBase: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;

  /* Fluent 2 Standard Typography Scale */
  --font-size-caption: 0.75rem;    /* 12px */
  --font-size-label: 0.875rem;     /* 14px */
  --font-size-body: 0.9375rem;     /* 15px */
  --font-size-body-large: 1rem;    /* 16px */
  --font-size-subtitle: 1.125rem;  /* 18px */
  --font-size-title: 1.375rem;     /* 22px */
  --font-size-heading: 1.75rem;    /* 28px */
  --font-size-display: 2.25rem;    /* 36px */

  /* Direct Font Token Aliases (YÊU CẦU 2) */
  --font-caption: var(--font-size-caption);
  --font-label: var(--font-size-label);
  --font-body: var(--font-size-body);
  --font-body-large: var(--font-size-body-large);
  --font-subtitle: var(--font-size-subtitle);
  --font-title: var(--font-size-title);
  --font-heading: var(--font-size-heading);
  --font-display: var(--font-size-display);

  /* Numeric Font Sizes */
  --fontSize100: 0.75rem;
  --fontSize200: var(--font-size-caption);
  --fontSize300: var(--font-size-label);
  --fontSize400: var(--font-size-body-large);
  --fontSize500: var(--font-size-subtitle);
  --fontSize600: 1.25rem;
  --fontSize700: var(--font-size-heading);
  --fontSize800: 2rem;
  --fontSize900: var(--font-size-display);
  --fontSize1000: 4.25rem;

  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;

  --lineHeight100: 14px;
  --lineHeight200: 16px;
  --lineHeight300: 20px;
  --lineHeight400: 22px;
  --lineHeight500: 28px;
  --lineHeight600: 32px;

  /* --- Border Radius Tokens --- */
  --borderRadiusNone: 0px;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 8px;
  --borderRadiusXLarge: 12px;
  --borderRadiusCircular: 9999px;

  --radius-none: var(--borderRadiusNone);
  --radius-small: var(--borderRadiusSmall);
  --radius-medium: var(--borderRadiusMedium);
  --radius-large: var(--borderRadiusLarge);
  --radius-xlarge: var(--borderRadiusXLarge);
  --radius-circular: var(--borderRadiusCircular);

  --radius-xs: var(--borderRadiusSmall);
  --radius-sm: var(--borderRadiusMedium);
  --radius-md: var(--borderRadiusLarge);
  --radius-lg: var(--borderRadiusXLarge);
  --radius-xl: var(--borderRadiusXLarge);
  --radius-full: var(--borderRadiusCircular);

  /* --- Spacing Tokens --- */
  --spacingNone: 0px;
  --spacingXXS: 2px;
  --spacingXS: 4px;
  --spacingS: 8px;
  --spacingMNudge: 10px;
  --spacingM: 12px;
  --spacingL: 16px;
  --spacingXL: 20px;
  --spacingXXL: 24px;
  --spacingXXXL: 32px;

  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  --space-2xs: var(--spacingXXS);
  --space-xs: var(--spacingXS);
  --space-sm: var(--spacingS);
  --space-md: var(--spacingM);
  --space-lg: var(--spacingL);
  --space-xl: var(--spacingXXL);
  --space-2xl: var(--spacingXXXL);

  /* --- Shadow / Elevation Tokens --- */
  --shadow2: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
  --shadow4: 0 3.2px 7.2px 0 rgba(0,0,0,0.132), 0 0.6px 1.8px 0 rgba(0,0,0,0.108);
  --shadow8: 0 6.4px 14.4px 0 rgba(0,0,0,0.132), 0 1.2px 3.6px 0 rgba(0,0,0,0.108);
  --shadow16: 0 12.8px 28.8px 0 rgba(0,0,0,0.132), 0 2.4px 7.2px 0 rgba(0,0,0,0.108);
  --shadow28: 0 25.6px 57.6px 0 rgba(0,0,0,0.132), 0 4.8px 14.4px 0 rgba(0,0,0,0.108);
  --shadow64: 0 51.2px 115.2px 0 rgba(0,0,0,0.132), 0 9.6px 28.8px 0 rgba(0,0,0,0.108);

  --shadow-2: var(--shadow2);
  --shadow-4: var(--shadow4);
  --shadow-8: var(--shadow8);
  --shadow-16: var(--shadow16);
  --shadow-28: var(--shadow28);
  --shadow-64: var(--shadow64);

  --elevation-0: none;
  --elevation-2: var(--shadow2);
  --elevation-4: var(--shadow4);
  --elevation-8: var(--shadow8);
  --elevation-16: var(--shadow16);
  --elevation-28: var(--shadow28);
  --elevation-64: var(--shadow64);

  /* --- Motion / Transition Tokens ---
     Kept in sync with system-animations.css's :root block (loaded after
     this file on every app page), which is the file most of the app's
     transitions actually reference. Values below match what is currently
     live, avoiding two sources of truth with different numbers. */
  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 200ms;
  --durationNormal: 250ms;
  --durationGentle: 250ms;
  --durationSlow: 500ms;
  --durationUltraSlow: 500ms;

  --motion-ultra-fast: 50ms;
  --motion-faster: 100ms;
  --motion-fast: 200ms;
  --motion-normal: 250ms;
  --motion-gentle: 250ms;
  --motion-slow: 500ms;
  --motion-ultra-slow: 500ms;

  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --curveDecelerateMax: cubic-bezier(0, 0, 0, 1);
  --curveAccelerateMax: cubic-bezier(1, 0, 1, 1);
  --curveFluent: cubic-bezier(0.1, 0.9, 0.2, 1.0);

  --curve-fluent: var(--curveFluent);
  --curve-decelerate: var(--curveDecelerateMax);
  --curve-accelerate: var(--curveAccelerateMax);
  --curve-standard: var(--curveEasyEase);

  --duration-ultra-fast: var(--durationUltraFast);
  --duration-faster: var(--durationFaster);
  --duration-fast: var(--durationFast);
  --duration-normal: var(--durationNormal);
  --duration-slow: var(--durationSlow);
  --easing-fluent: var(--curveFluent);
  --easing-standard: var(--curveEasyEase);

  /* --- Z-index Tokens --- */
  --zIndexBase: 1;
  --zIndexDropdown: 1000;
  --zIndexSticky: 1020;
  --zIndexModalBackdrop: 1040;
  --zIndexModal: 1050;
  --zIndexPopover: 1060;
  --zIndexTooltip: 1070;
  --zIndexToast: 1080;

  --z-base: var(--zIndexBase);
  --z-dropdown: var(--zIndexDropdown);
  --z-sticky: var(--zIndexSticky);
  --z-modal-backdrop: var(--zIndexModalBackdrop);
  --z-modal: var(--zIndexModal);
  --z-popover: var(--zIndexPopover);
  --z-tooltip: var(--zIndexTooltip);
  --z-toast: var(--zIndexToast);

  /* --- Opacity Tokens --- */
  --opacity-transparent: 0;
  --opacity-subtle: 0.04;
  --opacity-disabled: 0.38;
  --opacity-hover: 0.08;
  --opacity-pressed: 0.12;
  --opacity-medium: 0.6;
  --opacity-high: 0.8;
  --opacity-overlay: 0.4;
  --opacity-opaque: 1;

  /* --- LIGHT THEME TOKENS (Default) --- */
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackground5: #eb9696;
  --colorNeutralBackground6: #e0e0e0;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground2Hover: #f0f0f0;
  --colorNeutralBackground2Pressed: #e5e5e5;
  --colorNeutralBackground3Hover: #e8e8e8;
  --colorNeutralBackground3Pressed: #dddddd;
  --colorNeutralBackgroundDisabled: #f0f0f0;

  --colorNeutralBackgroundSubtle: transparent;
  --colorNeutralBackgroundSubtleHover: rgba(0, 0, 0, 0.04);
  --colorNeutralBackgroundSubtlePressed: rgba(0, 0, 0, 0.08);

  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #616161;
  --colorNeutralForeground3: #707070;
  /* WCAG 2.2 AA fix (1.4.3 Contrast Minimum): was #a19f9d (~2.64:1 on white,
     fails 4.5:1). ForegroundDisabled keeps the original value since disabled
     UI text is exempt from contrast requirements and a lighter "clearly
     inactive" look is intentional there. */
  --colorNeutralForeground4: #6b6b6b;
  --colorNeutralForegroundDisabled: #a19f9d;
  --colorNeutralForeground1Hover: #1f1f1f;
  --colorNeutralForeground1Pressed: #141414;
  --colorNeutralForeground2Hover: #424242;
  --colorNeutralForeground2Pressed: #242424;
  --colorNeutralForeground3Hover: #616161;
  --colorNeutralForeground3Pressed: #424242;
  --colorNeutralForegroundOnBrand: #ffffff;

  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0f548c;
  --colorBrandBackgroundSelected: #0f548c;
  --colorBrandBackground2: #eff6ff;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;
  --colorBrandStroke1: #0f6cbd;
  --colorBrandStroke2: #115ea3;

  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStrokeSubtle: #e6e6e6;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke1Pressed: #b3b3b3;
  --colorNeutralStrokeDisabled: #e0e0e0;

  --colorStatusSuccessBackground1: #dff6dd;
  --colorStatusSuccessBackground2: #ecfdf5;
  --colorStatusSuccessForeground1: #107c10;
  --colorStatusSuccessForeground2: #0e6a0e;
  --colorStatusSuccessBorder1: #92c353;

  --colorStatusWarningBackground1: #fff4ce;
  --colorStatusWarningBackground2: #fffbeb;
  /* WCAG 2.2 AA fix: was #797673 (~4.10:1 on --colorStatusWarningBackground1,
     fails 4.5:1 for normal text). */
  --colorStatusWarningForeground1: #6b6560;
  --colorStatusWarningForeground2: #8a6100;
  --colorStatusWarningBorder1: #fce100;

  --colorStatusDangerBackground1: #fde7e9;
  --colorStatusDangerBackground2: #fef2f2;
  /* WCAG 2.2 AA fix: was #c239b3 (~3.93:1 on --colorStatusDangerBackground1,
     fails 4.5:1 for normal text). Same magenta hue, darkened for contrast. */
  --colorStatusDangerForeground1: #a3298f;
  --colorStatusDangerForeground2: #a4262c;
  --colorStatusDangerBorder1: #f87271;

  --colorStatusInfoBackground1: #deecf9;
  --colorStatusInfoForeground1: #005a9e;
  --colorStatusInfoBorder1: #0f6cbd;

  --colorFocusRingOuter: #0f6cbd;
  --colorFocusRingInner: #ffffff;
  --focusRing: 0 0 0 2px var(--colorFocusRingInner), 0 0 0 4px var(--colorFocusRingOuter);

  /* Helper Aliases */
  --color-primary: var(--colorBrandBackground);
  --color-primary-hover: var(--colorBrandBackgroundHover);
  --color-primary-active: var(--colorBrandBackgroundPressed);
  --color-primary-light: var(--colorBrandBackground2);
  --color-success: var(--colorStatusSuccessForeground1);
  --color-warning: var(--colorStatusWarningForeground1);
  --color-danger: var(--colorStatusDangerForeground1);
  --color-info: var(--colorStatusInfoForeground1);
  --color-surface: var(--colorNeutralBackground1);
  --color-surface-hover: var(--colorNeutralBackground1Hover);
  --color-surface-active: var(--colorNeutralBackground1Pressed);
  --color-bg: var(--colorNeutralBackground2);
  --color-text: var(--colorNeutralForeground1);
  --color-text-muted: var(--colorNeutralForeground2);
  --color-border: var(--colorNeutralStroke1);
  --color-border-hover: var(--colorNeutralStroke1Hover);
  --color-border-focus: var(--colorBrandStroke1);
  --focus-ring: var(--focusRing);

  /* --- Standard Semantic Design Tokens (Microsoft Fluent 2) --- */
  --color-bg-primary: var(--colorNeutralBackground1);
  --color-bg-secondary: var(--colorNeutralBackground2);
  --color-bg-tertiary: var(--colorNeutralBackground3);

  --color-surface-secondary: var(--colorNeutralBackground2);
  --color-surface-elevated: var(--colorNeutralBackground1);

  --color-border-subtle: var(--colorNeutralStrokeSubtle);
  --color-border-strong: var(--colorNeutralStroke1Hover);

  --color-text-primary: var(--colorNeutralForeground1);
  --color-text-secondary: var(--colorNeutralForeground2);
  --color-text-tertiary: var(--colorNeutralForeground3);
  --color-text-disabled: var(--colorNeutralForegroundDisabled);

  --color-brand: var(--colorBrandBackground);
  --color-brand-hover: var(--colorBrandBackgroundHover);
  --color-brand-active: var(--colorBrandBackgroundPressed);
  --color-brand-subtle: var(--colorBrandBackground2);
  --color-brand-bg: var(--colorBrandBackground);
  --color-brand-bg-hover: var(--colorBrandBackgroundHover);

  --color-success-bg: var(--colorStatusSuccessBackground1);
  --color-success-border: var(--colorStatusSuccessBorder1);
  --color-warning-bg: var(--colorStatusWarningBackground1);
  --color-warning-border: var(--colorStatusWarningBorder1);
  --color-danger-bg: var(--colorStatusDangerBackground1);
  --color-danger-border: var(--colorStatusDangerBorder1);
  --color-info-bg: var(--colorStatusInfoBackground1);
  --color-info-border: var(--colorStatusInfoBorder1);
}

/* --- DARK THEME OVERRIDES --- */
html[data-theme="dark"],
[data-theme="dark"],
.dark {
  /* Fluent 2 Dark Neutral Backgrounds */
  --colorNeutralBackground1: #242424;  /* Surface / Card */
  --colorNeutralBackground2: #181818;  /* Page Canvas / App Background */
  --colorNeutralBackground3: #1f1f1f;  /* Sub-panel / Sidebar / Header / Table Header */
  --colorNeutralBackground4: #2d2d2d;  /* Elevated Modal / Popover / Dropdown */
  --colorNeutralBackground5: #383838;  /* Secondary control background */
  --colorNeutralBackground6: #424242;
  --colorNeutralBackground1Hover: #2f2f2f;
  --colorNeutralBackground1Pressed: #383838;
  --colorNeutralBackground2Hover: #242424;
  --colorNeutralBackground2Pressed: #2d2d2d;
  --colorNeutralBackground3Hover: #282828;
  --colorNeutralBackground3Pressed: #303030;
  --colorNeutralBackgroundDisabled: #242424;

  --colorNeutralBackgroundSubtle: transparent;
  --colorNeutralBackgroundSubtleHover: rgba(255, 255, 255, 0.06);
  --colorNeutralBackgroundSubtlePressed: rgba(255, 255, 255, 0.10);

  /* Fluent 2 Dark Neutral Foregrounds */
  --colorNeutralForeground1: #f3f3f3;
  --colorNeutralForeground2: #c7c7c7;
  --colorNeutralForeground3: #9e9e9e;
  --colorNeutralForeground4: #757575;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralForeground1Hover: #ffffff;
  --colorNeutralForeground1Pressed: #e0e0e0;
  --colorNeutralForeground2Hover: #ffffff;
  --colorNeutralForeground2Pressed: #d6d6d6;
  --colorNeutralForeground3Hover: #c7c7c7;
  --colorNeutralForeground3Pressed: #adadad;
  --colorNeutralForegroundOnBrand: #ffffff;

  /* Fluent 2 Brand Tokens */
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0f548c;
  --colorBrandBackgroundSelected: #0f548c;
  --colorBrandBackground2: rgba(71, 158, 245, 0.14);
  --colorBrandForeground1: #479ef5;
  --colorBrandForeground2: #5ca9f6;
  --colorBrandStroke1: #479ef5;
  --colorBrandStroke2: #5ca9f6;

  /* Fluent 2 Dark Strokes (clean & subtle contrast) */
  --colorNeutralStroke1: rgba(255, 255, 255, 0.12);
  --colorNeutralStroke2: rgba(255, 255, 255, 0.08);
  --colorNeutralStroke3: rgba(255, 255, 255, 0.05);
  --colorNeutralStrokeSubtle: rgba(255, 255, 255, 0.08);
  --colorNeutralStroke1Hover: rgba(255, 255, 255, 0.20);
  --colorNeutralStroke1Pressed: rgba(255, 255, 255, 0.26);
  --colorNeutralStrokeDisabled: rgba(255, 255, 255, 0.06);

  /* Status Colors in Dark Mode - clean, balanced tints */
  --colorStatusSuccessBackground1: rgba(16, 124, 16, 0.20);
  --colorStatusSuccessBackground2: rgba(16, 124, 16, 0.10);
  --colorStatusSuccessForeground1: #54b054;
  --colorStatusSuccessForeground2: #6ce06c;
  --colorStatusSuccessBorder1: rgba(84, 176, 84, 0.35);

  --colorStatusWarningBackground1: rgba(255, 185, 0, 0.18);
  --colorStatusWarningBackground2: rgba(255, 185, 0, 0.10);
  --colorStatusWarningForeground1: #f3d37a;
  --colorStatusWarningForeground2: #fce100;
  --colorStatusWarningBorder1: rgba(243, 211, 122, 0.35);

  --colorStatusDangerBackground1: rgba(216, 59, 1, 0.20);
  --colorStatusDangerBackground2: rgba(216, 59, 1, 0.10);
  --colorStatusDangerForeground1: #f1707b;
  --colorStatusDangerForeground2: #f87271;
  --colorStatusDangerBorder1: rgba(241, 112, 123, 0.35);

  --colorStatusInfoBackground1: rgba(71, 158, 245, 0.18);
  --colorStatusInfoForeground1: #479ef5;
  --colorStatusInfoBorder1: rgba(71, 158, 245, 0.35);

  --colorFocusRingOuter: #479ef5;
  --colorFocusRingInner: #181818;
  --focusRing: 0 0 0 2px var(--colorFocusRingInner), 0 0 0 4px var(--colorFocusRingOuter);

  /* Standard Semantic Design Tokens (Dark Mode) */
  --color-bg-primary: #181818;
  --color-bg-secondary: #1f1f1f;
  --color-bg-tertiary: #242424;

  --color-surface: #242424;
  --color-surface-secondary: #1f1f1f;
  --color-surface-elevated: #2d2d2d;
  --color-surface-hover: #2f2f2f;
  --color-surface-active: #383838;

  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  --color-text-primary: #f3f3f3;
  --color-text-secondary: #c7c7c7;
  --color-text-tertiary: #9e9e9e;
  --color-text-disabled: #5c5c5c;

  --color-brand: #479ef5;
  --color-brand-hover: #5ca9f6;
  --color-brand-active: #388bfd;
  --color-brand-subtle: rgba(71, 158, 245, 0.14);
  --color-brand-bg: #0f6cbd;
  --color-brand-bg-hover: #115ea3;

  --color-success: #54b054;
  --color-success-bg: rgba(16, 124, 16, 0.20);
  --color-success-border: rgba(84, 176, 84, 0.35);

  --color-warning: #f3d37a;
  --color-warning-bg: rgba(255, 185, 0, 0.18);
  --color-warning-border: rgba(243, 211, 122, 0.35);

  --color-danger: #f1707b;
  --color-danger-bg: rgba(216, 59, 1, 0.20);
  --color-danger-border: rgba(241, 112, 123, 0.35);

  --color-info: #479ef5;
  --color-info-bg: rgba(71, 158, 245, 0.18);
  --color-info-border: rgba(71, 158, 245, 0.35);

  --color-bg: #181818;
  --color-text: #f3f3f3;
  --color-text-muted: #c7c7c7;
  --color-border-hover: rgba(255, 255, 255, 0.20);
  --color-border-focus: var(--colorBrandStroke1);
}

/* --- ACRYLIC / GLASS THEME OVERRIDES --- */
html[data-theme="acrylic"],
html[data-theme="glass"],
[data-theme="acrylic"],
[data-theme="glass"] {
  --colorNeutralBackground1: rgba(255, 255, 255, 0.7);
  --colorNeutralBackground2: rgba(245, 245, 245, 0.6);
  --colorNeutralBackground3: rgba(255, 255, 255, 0.85);
  --colorNeutralBackground4: rgba(240, 240, 240, 0.9);
  --colorNeutralBackground1Hover: rgba(255, 255, 255, 0.85);
  --colorNeutralBackground1Pressed: rgba(255, 255, 255, 0.95);

  --colorNeutralForeground1: #1f2937;
  --colorNeutralForeground2: #4b5563;
  --colorNeutralForeground3: #6b7280;

  --colorNeutralStroke1: rgba(255, 255, 255, 0.5);
  --colorNeutralStroke2: rgba(255, 255, 255, 0.3);
  --colorNeutralStrokeSubtle: rgba(255, 255, 255, 0.2);

  --colorFocusRingOuter: #0f6cbd;
  --colorFocusRingInner: rgba(255, 255, 255, 0.8);
  --focusRing: 0 0 0 2px var(--colorFocusRingInner), 0 0 0 4px var(--colorFocusRingOuter);

  --color-surface: var(--colorNeutralBackground1);
  --color-surface-hover: var(--colorNeutralBackground1Hover);
  --color-surface-active: var(--colorNeutralBackground1Pressed);
  --color-bg: var(--colorNeutralBackground2);
  --color-text: var(--colorNeutralForeground1);
  --color-text-muted: var(--colorNeutralForeground2);
  --color-border: var(--colorNeutralStroke1);
}