:root {
  /* Primary */
  --color-primary:       #1A73E8;
  --color-primary-dark:  #1557B0;
  --color-primary-light: #4A9EF5;

  /* Accent */
  --color-accent:        #00C896;
  --color-accent-dark:   #00A67E;
  --color-accent-light:  #33D9AD;

  /* Gradient */
  --gradient-main: linear-gradient(135deg, #1A73E8, #00C896);

  /* Surfaces */
  --color-bg:            #EEF1F6;
  --color-surface:       #FFFFFF;
  --color-card:          #F8F9FC;
  --color-border:        #E2E5EE;
  --color-card-border:   #E7EAF0;
  --color-divider:       #E1E5EC;
  --color-divider-soft:  #F0F1F5;
  --color-field-bg:      #F9FAFC;

  /* Dark surfaces (sidebar) */
  --color-dark-bg:       #0F1117;
  --color-dark-surface:  #1A1D27;
  --color-dark-card:     #22263A;
  --color-dark-border:   rgba(255, 255, 255, 0.08);

  /* Text */
  --color-text:          #1A1D27;
  --color-text-muted:    #6B7280;
  --color-text-subtle:   #9CA3AF;

  /* Semantic */
  --color-success:       #00C896;
  --color-warning:       #F5A623;
  --color-error:         #E84040;

  /* Typography scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.03);
  --shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.10);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Global utility classes */

.text-accent {
  color: var(--color-accent);
}

.text-primary {
  color: var(--color-primary);
}

.text-error {
  color: var(--color-error);
}

.text-muted {
  color: var(--color-text-muted);
}

.auth-logo-text {
  font-weight: 700;
  letter-spacing: -0.02em;
}