/* ============================================================
   community-theme.css

   PURPOSE:
   This file contains ONLY design tokens / CSS variables.

   Do NOT put component selectors here.
   Do NOT put .app-page-header, .app-card, .app-chip, etc. here.

   Load order:
     1. Bootstrap
     2. community-theme.css
     3. community-layout.css
     4. community-components.css
   ============================================================ */

:root {
    /* Brand colors */
    --brand-primary: #3C85AE;
    --brand-primary-dark: #2B6787;
    --brand-primary-light: #DDECF4;

    --brand-accent: #6FBF73;
    --brand-accent-dark: #4E9F54;
    --brand-accent-light: #E5F5E7;

    --brand-highlight: #F2B95E;
    --brand-highlight-dark: #D99D3D;
    --brand-highlight-light: #FFF2DA;

    /* Neutral colors */
    --app-bg: #F5F8FB;
    --app-surface: #FFFFFF;
    --app-surface-muted: #F9FBFD;

    --app-text: #2E3A46;
    --app-text-muted: #667788;

    --app-border: #D8E1E8;
    --app-border-dark: #B7C6D1;

    /* Status colors */
    --status-success: #6FBF73;
    --status-warning: #F2B95E;
    --status-danger: #C85C5C;
    --status-info: #3C85AE;

    /* Shape */
    --app-radius-sm: 0.5rem;
    --app-radius: 0.85rem;
    --app-radius-lg: 1rem;

    /* Shadows */
    --app-shadow-sm: 0 0.25rem 0.75rem rgba(46, 58, 70, 0.08);
    --app-shadow: 0 0.5rem 1.25rem rgba(46, 58, 70, 0.10);

    /* Focus */
    --app-focus-ring: 0 0 0 0.2rem rgba(60, 133, 174, 0.25);
}