/* CSS Variables and Base Styles */
:root {
  /* Component Variables */
  --prg-bar-h: 5px; --search-buttons-border: 3px solid rgb(var(--grey-300));

  /* Legacy tokens only. New tokens in core/tokens.css */
  /* Note: --fs-*, --radius-*, --container-max, --gap, --easing are defined in tokens.css */
  /* These legacy tokens kept for backward compatibility only */
  --lh-tight: 1.15; --lh-normal: 1.4;
  --shadow-1: 0 1px 2px rgba(var(--color-text), .06);
}

/* Base Reset */
html {
  min-width: 360px;
  width: 100%;
  min-height: 100dvh;
  /* Base colors for inheritance */
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-canvas));
}

body {
  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
  /* Base colors - inherited by all elements */
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-canvas));
  /* Subtle modern background */
  background:
    radial-gradient(800px 300px at 20% -10%, rgba(var(--color-primary), 0.06), transparent 60%),
    radial-gradient(600px 260px at 80% -10%, rgba(var(--color-primary-hover), 0.05), transparent 60%),
    var(--color-canvas);
  width: 100vw;
  overflow-x: clip;
}

/* Global loader moved to components/loader.css */

/* Spinner moved to components/loader.css */

/* Utility Classes */
.text-narrow { 
  font-family: var(--font-compact);
}

.fs-7 { 
  font-size: 0.95rem !important;
}

.fs-8 { 
  font-size: 0.85rem !important;
}

.fs-9 { 
  font-size: 0.75rem !important;
}

/* Color Background Classes */
.bg-green {
  background-color: rgba(var(--color-success), var(--col-list-opacity)); 
  color: rgb(var(--grey-50));
}

.bg-red {
  background-color: rgba(var(--color-error), var(--col-list-opacity));
  color: rgb(var(--grey-50));
}

.bg-blue {
  background-color: rgba(var(--color-primary), var(--col-list-opacity));
  color: rgb(var(--grey-50));
}

.bg-dgray {
  background-color: rgba(var(--grey-400), calc(var(--col-list-opacity) + 0.3));
  color: rgb(var(--grey-50));
}

.font-red {
  color: rgb(var(--color-text));
}

.bg-rons-grad {
  background: linear-gradient(90deg, rgba(var(--color-primary), 0.9) 0%, rgba(var(--color-primary), 1) 100%);
}

/* Highlight */
.highlihgt, h { 
  display: inline; 
  background-color: rgba(var(--color-info), 0.2);
  display: inline-block; 
  border-radius: 5px;
}

h {
  font-weight: normal;
  background-color: rgba(var(--color-info), 0.2);
  display: inline-block; 
  border-radius: 5px;
}

/* Responsive Font Sizes */
@media (min-width: 576px) {
  .fs-sm-5 {
    font-size: 1.25rem !important;
  }
  .fs-sm-6 {
    font-size: 1rem !important;
  }    
  .fs-sm-7 {
    font-size: 0.9rem !important;
  }
  .fs-sm-8 {
    font-size: 0.8rem !important;
  }
  .fs-sm-9 {
    font-size: 0.7rem !important;
  }

  .text-sm-narrow { 
    font-family: var(--font-compact);
  }
}