/**
 * Modules/App (File Name): theme-tokens
 * Description: Canonical CSS variable design tokens for HubBroker iPaaS V6
 * Maps hardcoded hex/rgb values to semantic custom properties responsive to light/dark themes
 */

:root {
    /* Main body properties */
    --hb-body-bg: #ffffff;
    --hb-body-color: #6a6c6f;
    --hb-font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Semantic text color properties */
    --hb-text-color: #6a6c6f;
    --hb-text-muted: #888888;
    --hb-text-heading: #2f4050;
    
    /* Surfaces / Backgrounds */
    --hb-surface-bg: #ffffff;
    --hb-surface-alt: #f7f9fa;
    --hb-card-bg: #ffffff;
    --hb-card-border: #e4e5e7;
    
    /* Global borders */
    --hb-border-color: #e4e5e7;
    --hb-border-subtle: #cbd5e1;

    /* Interactive components / forms */
    --hb-input-bg: #ffffff;
    --hb-input-color: #6a6c6f;
    --hb-input-border: #cbd5e1;
    --hb-input-disabled-bg: #eeeeee;
    --hb-input-focus-border: #7f8558;
    --hb-input-focus-shadow: rgba(127, 133, 88, 0.2);

    /* Alerts and states */
    --hb-alert-success-bg: rgba(26, 179, 148, 0.05);
    --hb-alert-success-text: #1ab394;
    --hb-alert-success-border: #1ab394;

    --hb-alert-danger-bg: rgba(237, 85, 101, 0.05);
    --hb-alert-danger-text: #ed5565;
    --hb-alert-danger-border: #ed5565;

    --hb-alert-warning-bg: rgba(245, 158, 11, 0.05);
    --hb-alert-warning-text: #b45309;
    --hb-alert-warning-border: #f59e0b;

    /* Theme brand colors */
    --hb-green: #62cb31;
    --hb-green-hover: #50b520;

    /* Typography custom properties */
    --hb-font-size-base: 13px;
    --hb-heading-font-weight: 200;
}

[data-bs-theme="dark"] {
    /* Main body properties */
    --hb-body-bg: #0f172a;
    --hb-body-color: #f8fafc;

    /* Semantic text color properties */
    --hb-text-color: #f8fafc;
    --hb-text-muted: #94a3b8;
    --hb-text-heading: #f8fafc;
    
    /* Surfaces / Backgrounds */
    --hb-surface-bg: #1e293b;
    --hb-surface-alt: #0f172a;
    --hb-card-bg: #1e293b;
    --hb-card-border: #334155;
    
    /* Global borders */
    --hb-border-color: #334155;
    --hb-border-subtle: #475569;

    /* Interactive components / forms */
    --hb-input-bg: #0f172a;
    --hb-input-color: #f8fafc;
    --hb-input-border: #475569;
    --hb-input-disabled-bg: #334155;
    --hb-input-focus-border: #cbd5e1;
    --hb-input-focus-shadow: rgba(255, 255, 255, 0.15);

    /* Alerts and states */
    --hb-alert-success-bg: rgba(26, 179, 148, 0.15);
    --hb-alert-success-text: #2ec4a2;
    --hb-alert-success-border: #2ec4a2;

    --hb-alert-danger-bg: rgba(237, 85, 101, 0.15);
    --hb-alert-danger-text: #f06a78;
    --hb-alert-danger-border: #f06a78;

    --hb-alert-warning-bg: rgba(245, 158, 11, 0.15);
    --hb-alert-warning-text: #f59e0b;
    --hb-alert-warning-border: #fbbf24;

    /* Theme brand colors */
    --hb-green: #4ade80;
    --hb-green-hover: #22c55e;
}

/* Typography styles matching V4 */
body {
    font-size: var(--hb-font-size-base);
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    font-weight: var(--hb-heading-font-weight);
}