/* ============================================
   GT ENERGY - DESIGN SYSTEM
   Unified styles for all modules
   ============================================ */

:root {
  /* === COLORS === */
  --color-white: #FFFFFF;
  --color-gray-light: #F5F5F5;
  --color-gray: #808080;
  --color-gray-dark: #4A4A4A;
  --color-black: #000000;
  
  /* === THEME ACCENTS === */
  --accent-admin: #E85241;        /* Red for admin */
  --accent-partner: #4FB89A;      /* Green for partners */
  --accent-current: var(--accent-admin); /* Default */
  
  /* === BACKGROUND === */
  --bg-main: #E8E4D8;            /* Beige */
  --bg-white: #FFFFFF;
  --bg-card: #FFFFFF;
  
  /* === TYPOGRAPHY === */
  --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  --font-size-xs: 0.75rem;       /* 12px */
  --font-size-sm: 0.875rem;      /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.25rem;       /* 20px */
  --font-size-2xl: 1.5rem;       /* 24px */
  --font-size-3xl: 2rem;         /* 32px */
  
  /* === SPACING === */
  --space-xs: 0.25rem;           /* 4px */
  --space-sm: 0.5rem;            /* 8px */
  --space-md: 1rem;              /* 16px */
  --space-lg: 1.5rem;            /* 24px */
  --space-xl: 2rem;              /* 32px */
  --space-2xl: 3rem;             /* 48px */
  
  /* === BORDERS === */
  --border-width: 1px;
  --border-radius: 8px;
  --border-color: var(--color-black);
  
  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
}

/* === THEME SWITCHING === */
[data-theme="partner"] {
  --accent-current: var(--accent-partner);
}

[data-theme="admin"] {
  --accent-current: var(--accent-admin);
}

/* === RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  font-weight: var(--font-weight-normal);
  color: var(--color-black);
  background-color: var(--bg-main);
  line-height: 1.5;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  margin-bottom: var(--space-md);
}

/* === BUTTONS === */
.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  text-align: center;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.btn-accent {
  border-color: var(--accent-current);
  color: var(--accent-current);
}

.btn-accent:hover {
  background: var(--accent-current);
  color: var(--color-white);
}

.btn-sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

/* === FORMS === */
.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-white);
  color: var(--color-black);
  transition: border-color var(--transition-fast);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-current);
}

.label {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-xl);
}

/* === UTILITY CLASSES === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.text-gray { color: var(--color-gray); }
.text-accent { color: var(--accent-current); }
.text-bold { font-weight: var(--font-weight-bold); }