/* 
 * College Park Community Preservation Trust - Design Kit
 * Based on official brand guidelines
 */

/* ============================================
   BRAND COLORS
   ============================================ */
:root {
  /* Primary Colors */
  --color-1a: #333F50;      /* Dark gray-blue */
  --color-1b: #03202A;      /* Primary dark teal */
  --color-1c: #FFD966;      /* Primary yellow */
  --color-1d: #FFF2CC;      /* Light yellow/cream */
  
  /* Secondary Colors */
  --color-2a: #FFFFFF;       /* White */
  --color-2b: #E7E6E6;     /* Light gray */
  --color-2c: #DEEBF7;      /* Light blue */
  
  /* Semantic Colors */
  --text-primary: #03202A;   /* Color 1B for text */
  --text-secondary: #333F50; /* Color 1A for secondary text */
  --bg-primary: #FFFFFF;     /* White background */
  --bg-secondary: #E7E6E6;  /* Light gray background */
  --accent-primary: #FFD966; /* Primary yellow accent */
  --accent-light: #FFF2CC;   /* Light yellow accent */
  --accent-blue: #DEEBF7;    /* Light blue accent */
  
  /* Error/Status Colors */
  --error: #E44D43;
  --success: #10b981;
  --warning: #f59e0b;
  --info: #3b82f6;
  
  /* Typography */
  --font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Weights */
  --font-weight-roman: 400;      /* Avenir Roman */
  --font-weight-medium: 500;      /* Avenir Medium */
  --font-weight-light: 300;       /* Avenir Light */
  --font-weight-extrabold: 800;   /* Avenir ExtraBold */
  
  /* Typography Scale */
  --font-size-h1: 40px;
  --line-height-h1: 40px;
  --letter-spacing-h1: 0;
  
  --font-size-h2: 24px;
  --line-height-h2: 40px;
  --letter-spacing-h2: 0;
  
  --font-size-h3: 18px;
  --line-height-h3: 40px;
  --letter-spacing-h3: 0;
  
  --font-size-text: 14px;
  --line-height-text: 40px;
  --letter-spacing-text: 0;
  
  --font-size-caption: 12px;
  --line-height-caption: 16px;
  --letter-spacing-caption: 0;
  
  /* Spacing & Layout */
  --border-weight: 3px;
  --border-radius-button: 25px;
  --border-radius-icon: 25px;
  --border-radius-textbox: 20px;
  --border-radius-card: 20px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(3, 32, 42, 0.1);
  --shadow-md: 0 4px 12px rgba(3, 32, 42, 0.15);
  --shadow-lg: 0 8px 24px rgba(3, 32, 42, 0.2);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

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

/* Header One - Avenir ExtraBold, 40px, Line Height 40, Letter Spacing 0 */
h1, .h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--text-primary);
  margin: 0;
}

/* Header Two - Avenir Light, 24px, Line Height 40, Letter Spacing 0 */
h2, .h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--text-primary);
  margin: 0;
}

/* Header Three - Avenir Medium, 18px, Line Height 40, Letter Spacing 0 */
h3, .h3 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--text-primary);
  margin: 0;
}

/* Text - Avenir Roman, 14px, Line Height 40, Letter Spacing 0 */
body, p, .text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-roman);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  letter-spacing: var(--letter-spacing-text);
  color: var(--text-primary);
}

/* Caption - Line Height 16, Letter Spacing 0 */
.caption, small {
  font-family: var(--font-family);
  font-weight: var(--font-weight-roman);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text-primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn, button {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text);
 14px;
  border: var(--border-weight) solid var(--text-primary);
  border-radius: var(--border-radius-button);
  padding: 12px 24px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.btn-primary:hover {
  background: var(--color-1a);
  border-color: var(--color-1a);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--color-2b);
  border-color: var(--text-primary);
}

.btn-accent {
  background: var(--accent-primary);
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.btn-accent:hover {
  background: var(--accent-light);
  border-color: var(--accent-primary);
}

/* ============================================
   TEXT BOXES / INPUTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-family: var(--font-family);
  font-weight: var(--font-weight-roman);
  font-size: var(--font-size-text);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: var(--border-weight) solid var(--color-2b);
  border-radius: var(--border-radius-textbox);
  padding: 12px 16px;
  width: 100%;
  transition: all var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(3, 32, 42, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-2b);
}

/* White border variant for text boxes */
.textbox-white {
  border: var(--border-weight) solid var(--bg-primary);
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--color-2b);
  border-radius: var(--border-radius-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-accent {
  background: var(--accent-light);
  border-color: var(--accent-primary);
}

.card-blue {
  background: var(--accent-blue);
  border-color: var(--color-2c);
}

/* ============================================
   ICONS
   ============================================ */
.icon {
  width: 24px;
  height: 24px;
  stroke-width: var(--border-weight);
  border-radius: var(--border-radius-icon);
}

.icon-circle {
  border-radius: 50%;
  border: var(--border-weight) solid var(--text-primary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--color-2b); }
.bg-accent { background-color: var(--accent-primary); }
.bg-accent-light { background-color: var(--accent-light); }
.bg-blue { background-color: var(--accent-blue); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent-primary); }

/* Spacing */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 20px;
    --font-size-h3: 16px;
  }
}

/* ============================================
   QR CODE STYLING
   ============================================ */
.qr-code {
  background: var(--bg-primary);
  border-radius: 0;
  padding: 20px;
  background-spread: 100%;
  opacity: 1;
}

.qr-code-transparent {
  opacity: 0.24;
}

/* ============================================
   PHOTOS / IMAGES
   ============================================ */
.photo-container {
  border-radius: 20px;
  overflow: hidden;
  opacity: 0.8;
}

/* ============================================
   CAPTION STYLING
   ============================================ */
.caption-yellow {
  color: #FFFF8F;
  line-height: 16px;
  letter-spacing: 0;
}

.caption-dark {
  color: #1A1B19;
  line-height: 16px;
  letter-spacing: 0;
}