:root {
  /* Semantic colors */
  --success-color: #107C10;
  --danger-color: #D13438;
  --info-color: #066dbd;
  --warning-color: #FF8C00;
  --bright-color: #C239B3;

  /* Primary color - Windows blue */
  --primary-color: #0078D4;

  /* Primary color variants */
  --primary-color-hover: color-mix(in srgb, var(--primary-color) 80%, white);
  --primary-color-active: color-mix(in srgb, var(--primary-color) 90%, white);
  --primary-color-disabled: color-mix(in srgb, var(--primary-color) 30%, white);
  --primary-color-focus: color-mix(in srgb, var(--primary-color) 70%, white);

  --primary-color-light: color-mix(in srgb, var(--primary-color) 40%, white);
  --primary-color-dark: color-mix(in srgb, var(--primary-color) 20%, black);
  --primary-color-contrast: color-mix(in srgb, var(--primary-color) 80%, black);
  --primary-color-contrast-light: color-mix(in srgb, var(--primary-color) 60%, black);
  --primary-color-contrast-dark: color-mix(in srgb, var(--primary-color) 40%, black);

  /* Button colors */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: var(--primary-color-hover);
  --btn-primary-active: var(--primary-color-active);

  --btn-success-bg: var(--success-color);
  --btn-success-text: #FFFFFF;
  --btn-success-hover: color-mix(in srgb, var(--success-color) 80%, white);
  --btn-success-active: color-mix(in srgb, var(--success-color) 90%, white);

  --primary-color-border: color-mix(in srgb, var(--primary-color) 60%, white);
  --primary-color-shade-1: color-mix(in srgb, var(--primary-color) 50%, white);
  --primary-color-shade-2: color-mix(in srgb, var(--primary-color) 20%, white);
  --primary-color-shade-3: color-mix(in srgb, var(--primary-color) 10%, white);

  /* Text colors */
  --primary-color-text: #323130;
  --secondary-color-text: #605E5C;

  /* UI element colors */
  --backdrop-color: rgba(0, 0, 0, 0.4);
  --pop-up-color: #FFFFFF;
  --pop-up-color-text: #323130;

  --modal-btn: #0078D4;
  --modal-btn-text: #FFFFFF;
  --modal-text: #323130;
  --modal-header: #F3F3F3;
  --modal-header-text: #323130;

  /* Background colors */
  --background-color: #FFFFFF;
  --primary-btn: var(--primary-color);
  --text-color: var(--primary-color-text);

  --border-color: #e4e4e4;
  --hover-color: var(--primary-color-hover);

  --bg-footer: #F3F3F3;
  --bg-header: #FFFFFF;
  --bg-header-text: var(--primary-color-text);

  /* Navbar background */
  --navbar-bg: #ebebeb;
  --navbar-text: #131313;

  --main-bg: #F3F3F3;
  --card-bg: #FFFFFF;

  /* Typography */
  --font-size-default: 14px;
  --font-size-base: var(--font-size-default);
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-size-xlarge: 20px;
  --font-size-xxlarge: 24px;
  --font-size-xs: 11px;
  --font-size-icon: 26px;
  /* Card */
  --card-border: var(--border-primary);
  --card-border-radius: var(--border-radius);
  --card-background: var(--card-bg);
  --card-shadow: var(--box-shadow);
  --card-padding: 24px;
  --card-spacing: 16px;


  /* Layout */
  --border-radius: 2px;
  --border-primary: 1px solid var(--border-color);
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight: 400;
  --font-color: var(--primary-color-text);

  /* Buttons */
  --btn-height: 32px;
  --btn-padding: 8px 16px;
  --btn-border-radius: var(--border-radius);
  --btn-font-size: var(--font-size-base);
  --btn-font-weight: 400;

  /* Popovers */
  --popover-bg: var(--card-bg);
  --popover-border: var(--border-primary);
  --popover-shadow: var(--box-shadow);
  --popover-border-radius: var(--border-radius);

  /* Badges */
  --badge-bg: var(--primary-color);
  --badge-text: var(--primary-color-contrast);
  --badge-border-radius: var(--border-radius);
  --badge-padding: 2px 6px;
  --badge-font-size: var(--font-size-xs);

  /* Component sizes */
  --badge-size-h: 50px;
  --badge-size-w: 200px;
  --badge-avatar: 40px;

  /* Additional border and shadow variants */
  --border-radius-large: 4px;
  --border-radius-small: 0px;
  --border-opaque: 1px solid rgba(0, 0, 0, 0.1);
  --border-dark: 1px solid rgba(0, 0, 0, 0.2);
  --box-shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.15);
  --box-shadow-frosted: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --backdrop-filter-blur: blur(5px);
}


[data-theme="dark"] {
  /* Background colors */
  --background-color: #1F1F1F;
  --main-bg: #2D2D30;
  --card-bg: #3C3C3C;
  --bg-footer: #2D2D30;
  --bg-header: #1F1F1F;
  --bg-header-text: #FFFFFF;

  /* Text colors */
  --text-color: #FFFFFF;
  --primary-color-text: #FFFFFF;
  --secondary-color-text: #C8C8C8;

  /* UI elements */
  --border-color: #3C3C3C;
  --hover-color: #4C4C4C;
  --modal-btn: #0078D4;
  --modal-btn-text: #FFFFFF;
  --modal-text: #FFFFFF;
  --modal-header: #2D2D30;
  --modal-header-text: #FFFFFF;
  --pop-up-color: #3C3C3C;
  --pop-up-color-text: #FFFFFF;
  --backdrop-color: rgba(0, 0, 0, 0.6);

  /* Navbar background for dark theme */
  --navbar-bg: var(--border-color);
  --navbar-text: var(--modal-btn-text);
  /* Box shadow for dark */
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Dark mode border and shadow variants */
  --border-opaque: 1px solid rgba(255, 255, 255, 0.1);
  --border-dark: 1px solid rgba(255, 255, 255, 0.2);
  --box-shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.4);
  --box-shadow-frosted: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Apply theme base font size so --font-size-base controls layout scaling */
html { font-size: var(--font-size-base, 14px); }