timetracking/httpdocs/assets/styles/atoms/_variables.scss

// ─── Color Palette ───────────────────────────────────────────────────────────
$color-primary:        #4a90d9;
$color-primary-dark:   #3178b8;
$color-primary-light:  #6aaee8;
$color-header-from:    #5b9fd6;
$color-header-to:      #3a7bbf;

$color-accent:         #f0a500;
$color-accent-dark:    #d4900a;
$color-accent-light:   #f5bc3a;

$color-white:          #ffffff;
$color-bg:             #dce9f5;
$color-card:           #f0f0f0;
$color-card-white:     #ffffff;

$color-text-dark:      #1a2a3a;
$color-text-base:      #3a4a5a;
$color-text-muted:     #7a8a9a;
$color-text-light:     #aab8c6;

$color-border:         #d0d8e0;
$color-input-bg:       #ffffff;
$color-input-border:   #b8c4d0;

$color-day-active-bg:  #1a2a3a;
$color-day-active-text:#ffffff;

$color-error:          #c83232;
$color-success:        #2d9e60;
$color-success-bg:     #e6f5ee;
$color-activate:       #3a9a3a;
$color-activate-light: #4ab44a;
$color-warning:        #b86200;
$color-warning-light:  #e8820a;
$color-overlay:        rgba(0, 0, 0, 0.45);

// ─── CSS Custom Properties (runtime-overridable via brand color) ──────────────
:root {
  --color-primary:       #{$color-primary};
  --color-primary-dark:  #{$color-primary-dark};
  --color-primary-light: #{$color-primary-light};
  --color-header-from:   #{$color-header-from};
  --color-header-to:     #{$color-header-to};
  --color-bg:            #{$color-bg};
  --color-primary-rgb:   74, 144, 217;
  --header-text:         #{$color-white};
  --header-text-muted:   rgba(255, 255, 255, 0.75);
  --header-overlay:      rgba(255, 255, 255, 0.18);
}

// ─── Typography ──────────────────────────────────────────────────────────────
$font-family-base:     'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-xs:         0.7rem;
$font-size-sm:         0.8rem;
$font-size-base:       0.875rem;
$font-size-md:         1rem;
$font-size-lg:         1.15rem;
$font-size-xl:         1.4rem;

$font-weight-regular:  400;
$font-weight-medium:   500;
$font-weight-bold:     700;

$line-height-base:     1.5;

// ─── Spacing ─────────────────────────────────────────────────────────────────
$space-1:  0.25rem;
$space-2:  0.5rem;
$space-3:  0.75rem;
$space-4:  1rem;
$space-5:  1.25rem;
$space-6:  1.5rem;
$space-8:  2rem;
$space-10: 2.5rem;
$space-12: 3rem;

// ─── Border Radius ───────────────────────────────────────────────────────────
$radius-sm:   4px;
$radius-md:   8px;
$radius-lg:   16px;
$radius-xl:   24px;
$radius-pill: 100px;

// ─── Shadows ─────────────────────────────────────────────────────────────────
$shadow-card:     0 2px 12px rgba(0, 60, 120, 0.08);
$shadow-header:   0 2px 16px rgba(0, 50, 120, 0.2);
$shadow-calendar: 0 8px 32px rgba(0, 60, 120, 0.35);
$shadow-input:    0 1px 3px rgba(0, 40, 80, 0.06) inset;
$shadow-focus:    0 0 0 3px rgba($color-primary, 0.15);
$shadow-button:   0 2px 8px rgba($color-accent, 0.35);

// ─── Transitions ─────────────────────────────────────────────────────────────
$transition-fast:   0.15s ease;
$transition-base:   0.2s ease;
$transition-slow:   0.3s ease;

// ─── Layout ──────────────────────────────────────────────────────────────────
$header-height:     88px;
$content-max-width: 860px;
$icon-btn-size:     28px;
$icon-svg-size:     14px;