/* ============================================
   SecondNotice Brand Colors
   ============================================ */

:root {
    /* Primary Blue - Trust / Reliability */
    --color-primary-blue: #2F3E5E;
    --color-navy: #2F3E5E;

    /* Primary Green - Paid / Success / Resolution */
    --color-primary-green: #7DBA3A;
    --color-success: #7DBA3A;

    /* Accent Orange - Notification / Urgency */
    --color-accent-orange: #F05A28;
    --color-notification: #F05A28;

    /* Supporting Neutrals */
    --color-text-dark: #111827;
    --color-text-muted: #6B7280;
    --color-background: #F9FAFB;
    --color-background-white: #ffffff;

    /* Semantic Aliases */
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-heading: #2F3E5E;
    --color-paid: #7DBA3A;
    --color-alert: #F05A28;
}

/* ============================================
   Usage Guidelines
   ============================================ */

/*
PRIMARY BLUE (#2F3E5E)
- Conveys: stability, finance, professionalism
- Use for: headlines, primary text, outlines, UI chrome
Example:
  h1, h2, h3 { color: var(--color-primary-blue); }
  .btn-primary { background: var(--color-primary-blue); }
*/

/*
PRIMARY GREEN (#7DBA3A)
- Conveys: money received, completion, relief
- Use for: "Notice" in logo, checkmarks, success states, CTAs
Example:
  .success-message { color: var(--color-primary-green); }
  .checkmark { color: var(--color-success); }
  .btn-success { background: var(--color-primary-green); }
*/

/*
ACCENT ORANGE (#F05A28)
- Use sparingly
- Best for: notification badge, small alerts, emphasis
Example:
  .notification-badge { background: var(--color-accent-orange); }
  .alert-text { color: var(--color-notification); }
*/

/*
SUPPORTING NEUTRALS
- Dark text (#111827): primary body text
- Muted gray (#6B7280): secondary text, labels
- Background (#F9FAFB or white): page backgrounds
Example:
  body {
    color: var(--color-text-dark);
    background: var(--color-background);
  }
  .muted { color: var(--color-text-muted); }
*/

/* ============================================
   Helper Classes
   ============================================ */

.text-primary-blue { color: var(--color-primary-blue); }
.text-primary-green { color: var(--color-primary-green); }
.text-accent-orange { color: var(--color-accent-orange); }
.text-dark { color: var(--color-text-dark); }
.text-muted { color: var(--color-text-muted); }

.bg-primary-blue { background-color: var(--color-primary-blue); }
.bg-primary-green { background-color: var(--color-primary-green); }
.bg-accent-orange { background-color: var(--color-accent-orange); }
.bg-background { background-color: var(--color-background); }
.bg-white { background-color: var(--color-background-white); }

.border-primary-blue { border-color: var(--color-primary-blue); }
.border-primary-green { border-color: var(--color-primary-green); }
.border-accent-orange { border-color: var(--color-accent-orange); }

/* ============================================
   Component Examples
   ============================================ */

/* Buttons */
.btn-brand-primary {
    background-color: var(--color-primary-blue);
    color: white;
    border: none;
}

.btn-brand-primary:hover {
    background-color: #253247; /* Darker blue */
}

.btn-brand-success {
    background-color: var(--color-primary-green);
    color: white;
    border: none;
}

.btn-brand-success:hover {
    background-color: #6a9f32; /* Darker green */
}

/* Badges & Pills */
.notification-badge {
    background-color: var(--color-accent-orange);
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.success-badge {
    background-color: var(--color-primary-green);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
}

/* Alerts */
.alert-urgent {
    background-color: rgba(240, 90, 40, 0.1);
    border-left: 4px solid var(--color-accent-orange);
    padding: 16px;
}

.alert-success {
    background-color: rgba(125, 186, 58, 0.1);
    border-left: 4px solid var(--color-primary-green);
    padding: 16px;
}

/* Checkmarks & Icons */
.checkmark {
    color: var(--color-primary-green);
    font-weight: 700;
}

.checkmark::before {
    content: '✓';
}