/************************************************************************************************
 *
 * Project:     Harmonia
 * File:        /public_html/assets/css/master.css
 * Version:     v1.0.0
 * Purpose:     Sitewide base styles: reset, CSS custom properties, typography, and the shared
 *              .hx-container/.hx-panel/.hx-btn/.hx-badge/.hx-table primitives used by both the
 *              public and admin layouts.
 *
 * Notes:
 * - Loaded via the @stylesheets Blade directive (App\Support\AssetManifest), which emits a
 *   separate parallel-loadable <link> tag per module — deliberately not using @import, which
 *   would force serial loading instead of parallel.
 *
 ************************************************************************************************/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --hx-color-bg: #ffffff;
    --hx-color-fg: #1a1a1a;
    --hx-color-muted: #6b7280;
    --hx-color-border: #e2e2e2;
    --hx-color-panel-bg: #f9f9fa;
    --hx-color-primary: #2952e3;
    --hx-color-primary-fg: #ffffff;
    --hx-color-danger: #c0392b;
    --hx-color-success: #1e8e5a;
    --hx-color-warning: #b8860b;
    --hx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    --hx-radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hx-color-bg: #14151a;
        --hx-color-fg: #e8e8ea;
        --hx-color-muted: #9aa0ac;
        --hx-color-border: #2c2d33;
        --hx-color-panel-bg: #1b1c22;
    }
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--hx-color-bg);
    color: var(--hx-color-fg);
    font-family: var(--hx-font-sans);
    line-height: 1.5;
}

.hx-container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.hx-panel {
    background: var(--hx-color-panel-bg);
    border: 1px solid var(--hx-color-border);
    border-radius: var(--hx-radius);
    padding: 1.25rem;
    margin-block: 1.25rem;
}

.hx-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hx-btn {
    display: inline-block;
    font: inherit;
    padding: 0.5rem 0.9rem;
    border-radius: var(--hx-radius);
    border: 1px solid var(--hx-color-border);
    background: var(--hx-color-bg);
    color: var(--hx-color-fg);
    cursor: pointer;
    text-decoration: none;
}

.hx-btn--primary {
    background: var(--hx-color-primary);
    border-color: var(--hx-color-primary);
    color: var(--hx-color-primary-fg);
}

.hx-btn--danger {
    background: var(--hx-color-danger);
    border-color: var(--hx-color-danger);
    color: var(--hx-color-primary-fg);
}

.hx-btn--ghost {
    background: transparent;
}

.hx-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hx-badge {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--hx-color-border);
    color: var(--hx-color-muted);
}

.hx-badge--success {
    color: var(--hx-color-success);
    border-color: var(--hx-color-success);
}

.hx-badge--danger {
    color: var(--hx-color-danger);
    border-color: var(--hx-color-danger);
}

.hx-badge--warning {
    color: var(--hx-color-warning);
    border-color: var(--hx-color-warning);
}

.hx-table {
    width: 100%;
    border-collapse: collapse;
}

.hx-table th,
.hx-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--hx-color-border);
    font-size: 0.9rem;
}

.hx-muted {
    color: var(--hx-color-muted);
}