/*
 * Brand Variables - Default CSS Custom Properties
 * These defaults are overridden at runtime when branding is loaded from the API.
 * Shared copy so consuming apps (Connections, etc.) can reference via _content/.
 *
 * Naming convention:
 *   --brand-{category}-{name}
 *   Colors: --brand-primary, --brand-text-primary, etc.
 *   Fonts: --brand-font-heading, --brand-font-body, etc.
 */

:root {
    /* Brand Colors */
    --brand-primary: #1b6ec2;
    --brand-secondary: #6c757d;
    --brand-accent: #0d6efd;

    /* Background Colors */
    --brand-background: #ffffff;
    --brand-surface: #f8f9fa;

    /* Text Colors */
    --brand-text-primary: #212529;
    --brand-text-secondary: #6c757d;

    /* Semantic Colors */
    --brand-success: #198754;
    --brand-warning: #ffc107;
    --brand-error: #dc3545;
    --brand-info: #0dcaf0;

    /* UI Colors */
    --brand-border: #dee2e6;
    --brand-shadow: rgba(0, 0, 0, 0.1);

    /* Typography */
    --brand-font-heading: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --brand-font-body: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --brand-font-accent: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --brand-font-caption: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Font Weights */
    --brand-font-heading-weight: 600;
    --brand-font-body-weight: 400;
    --brand-font-accent-weight: 500;
    --brand-font-caption-weight: 400;

    /* Derived Colors (for hover states, etc.) */
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, black);
    --brand-primary-light: color-mix(in srgb, var(--brand-primary) 15%, white);
    --brand-secondary-hover: color-mix(in srgb, var(--brand-secondary) 85%, black);
}

/* Theme transition support - applied when switching themes */
.brand-transitioning,
.brand-transitioning * {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        fill 0.3s ease !important;
}

/* Syncfusion component overrides to use brand variables */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--brand-primary);
}

.e-tab .e-tab-header .e-indicator {
    background-color: var(--brand-primary);
}

.e-grid .e-headercell.e-focus,
.e-grid .e-rowcell.e-focus {
    border-color: var(--brand-primary);
}