/* ===== hgs_construction GOOD COUNCIL - DESIGN SYSTEM VARIABLES ===== */

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

  /* Backgrounds */
  --color-bg-primary: #0a0a0a; /* Deep black — main page background */
  --color-bg-secondary: #121212; /* Slightly lighter — for subtle layering */
  --color-bg-tertiary: #1e1e1e; /* Card/container background */

  /* Text Colors */
  --color-text-primary: #ffffff; /* Primary content */
  --color-text-secondary: #cccccc; /* Secondary info, labels, hints */
  --color-text-disabled: #777777; /* Disabled or inactive text */

  /* Accent & Symbolism */
  --color-accent-gold: #d4af37; /* hgs_construction gold — used for icons, highlights, and key interactive elements */

  /* Link Colors */
  --color-link: var(--color-accent-gold);
  --color-link-hover: var(--color-text-primary);
  --color-link-visited: var(--color-accent-gold);

  /* Interactive Elements */
  --color-button-bg: #2a2a2a; /* Default button background */
  --color-button-hover: #3a3a3a; /* Button hover state */
  --color-button-active: #444444; /* Button pressed/active */
  --color-input-bg: #1e1e1e; /* Input field background */
  --color-input-border: #333333; /* Input border (subtle) */
  --color-input-focus: var(--color-accent-gold); /* Focus ring or border */

  /* Dividers & Borders */
  --color-divider: #333333;

  /* Status Colors */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  /* ===== SPACING SYSTEM ===== */
  /* Based on 8px baseline grid */

  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 2.5rem; /* 40px */

  /* ===== BORDER RADIUS ===== */

  --radius-sm: 10px; /* Buttons & Inputs */
  --radius-md: 12px; /* Cards & Containers */
  --radius-round: 50%; /* Avatars & Circular elements */

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

  /* Font Families */
  --font-primary:
    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  --font-display:
    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-display: 28px;

  /* Line Heights */
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-base: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 28px;
  --line-height-display: 36px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== SHADOWS & EFFECTS ===== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Focus Ring */
  --focus-ring: 0 0 0 2px rgba(212, 175, 55, 0.3);

  /* ===== LAYOUT DIMENSIONS ===== */

  /* Header Heights */
  /* Layout Heights */
  --header-height-mobile: 48px;
  --header-height-desktop: 56px;
  --header-height-admin: 64px;
  --footer-height-mobile: 120px;
  --footer-height-desktop: 140px;

  /* Sidebar Widths */
  --sidebar-width-sm: 200px;
  --sidebar-width-md: 240px;

  /* Container Max Widths */
  --container-sm: 600px;
  --container-md: 900px;
  --container-lg: 1200px;
  --container-xl: 1400px;
  --container-full: 95%;

  /* ===== Z-INDEX SCALE ===== */

  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 100;
  --z-index-sidebar: 1000;
  --z-index-modal: 1000;
  --z-index-tooltip: 9999;
  --z-index-dropdown-menu: 9999;

  /* ===== TRANSITIONS ===== */

  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Specific transitions */
  --transition-colors:
    color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-transform: transform 0.2s ease;
  --transition-all: all 0.2s ease;

  /* ===== BREAKPOINTS (for reference in JavaScript) ===== */

  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;

  /* ===== COMPONENT-SPECIFIC VARIABLES ===== */

  /* Buttons */
  --btn-padding-y: 10px;
  --btn-padding-x: 16px;
  --btn-padding-y-sm: 8px;
  --btn-padding-x-sm: 12px;
  --btn-padding-y-lg: 12px;
  --btn-padding-x-lg: 20px;

  /* Inputs */
  --input-padding-y: 10px;
  --input-padding-x: 12px;

  /* Cards */
  --card-padding: var(--spacing-sm);
  --card-padding-lg: var(--spacing-md);

  /* Icons */
  --icon-size-xs: 16px;
  --icon-size-sm: 18px;
  --icon-size-base: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;

  /* Profile Avatars */
  --avatar-size-sm: 24px;
  --avatar-size-base: 32px;
  --avatar-size-lg: 64px;
}