/* public/css/colors.css */
/* LAYER 1 */
:root {
    /* ── Neutrals ── */
    --color-bg:          #f7f8fa;
    --color-surface:     #ffffff;
    --color-border:      #e3e6ec;
    --color-text:        #0f1729;
    --color-text-muted:  #5b6472;

    /* ── Brand / semantic hues ── */
    --color-primary:     #0b3d91;   /* deep confident navy */
    --color-success:     #0e8a5f;   /* muted emerald — "money" green */
    --color-danger:      #c22c2c;
    --color-warning:     #b5790a;
}
[data-theme="dark"] {
    --color-bg:          #000000;
    --color-surface:     #12161f;
    --color-border:      #232a38;
    --color-text:        #e9ecf2;
    --color-text-muted:  #8a92a3;

    --color-primary:     #4d8dff;   /* brighter navy-blue for dark contrast */
    --color-success:     #2ecf8e;
    --color-danger:      #ff5c5c;
    --color-warning:     #f2a93a;
}
/* LAYER 2 */
:root {
    /* ══ On-color text (what sits on top of a solid brand color) ══ */
    --on-primary: #ffffff;
    --on-success: #ffffff;
    --on-danger:  #ffffff;
    --on-warning: #ffffff;

    /* ══ Surface variants ══ */
    --surface-alt:    color-mix(in srgb, var(--color-surface) 94%, var(--color-text));
    --surface-sunken: color-mix(in srgb, var(--color-bg) 97%, var(--color-text));

    /* ══ Border variants ══ */
    --border-strong: color-mix(in srgb, var(--color-border) 55%, var(--color-text));

    /* ══ Brand — hover / active / soft ══ */
    --primary-hover:  color-mix(in srgb, var(--color-primary) 85%, black);
    --primary-active: color-mix(in srgb, var(--color-primary) 70%, black);
    --primary-soft:   color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    --primary-border: color-mix(in srgb, var(--color-primary) 35%, var(--color-surface));

    /* ══ Success — soft / border / text-on-surface ══ */
    --success-soft:   color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    --success-border: color-mix(in srgb, var(--color-success) 35%, var(--color-surface));
    --success-text:   color-mix(in srgb, var(--color-success) 80%, var(--color-text));

    /* ══ Danger — soft / border / text-on-surface ══ */
    --danger-soft:    color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    --danger-border:  color-mix(in srgb, var(--color-danger) 35%, var(--color-surface));
    --danger-text:    color-mix(in srgb, var(--color-danger) 80%, var(--color-text));
    --danger-hover:   color-mix(in srgb, var(--color-danger) 85%, black);

    /* ══ Warning — soft / border / text-on-surface ══ */
    --warning-soft:   color-mix(in srgb, var(--color-warning) 15%, var(--color-surface));
    --warning-border: color-mix(in srgb, var(--color-warning) 40%, var(--color-surface));
    --warning-text:   color-mix(in srgb, var(--color-warning) 80%, var(--color-text));

    /* ══ Neutral / gray badge ══ */
    --neutral-soft:   var(--surface-alt);
    --neutral-border: var(--color-border);
    --neutral-text:   var(--color-text-muted);

    /* ══ Interactive states (generic hover/active for any surface) ══ */
    --hover-overlay:  color-mix(in srgb, var(--color-text) 6%, transparent);
    --active-overlay: color-mix(in srgb, var(--color-text) 10%, transparent);

    /* ══ Focus ring ══ */
    --focus-ring: color-mix(in srgb, var(--color-primary) 35%, transparent);

    /* ══ Scrollbar ══ */
    --scrollbar-thumb:       color-mix(in srgb, var(--color-text) 20%, var(--color-surface));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 32%, var(--color-surface));

    /* ══ Shadows (opacity needs to flip in dark mode, handled below) ══ */
    --shadow-color: rgba(0,0,0,0.10);
    --shadow-color-strong: rgba(0,0,0,0.18);
}
[data-theme="dark"] {
    --on-primary: #0b0d12;
    --on-success: #0b0d12;
    --on-danger:  #1a0505;
    --on-warning: #1a1002;

    --primary-hover:  color-mix(in srgb, var(--color-primary) 85%, white);
    --primary-active: color-mix(in srgb, var(--color-primary) 70%, white);

    --danger-hover:   color-mix(in srgb, var(--color-danger) 85%, white);

    --shadow-color: rgba(0,0,0,0.35);
    --shadow-color-strong: rgba(0,0,0,0.5);
}
/* LAYER 3 */
:root {
    /* Buttons */
    --btn-primary-bg:        var(--color-primary);
    --btn-primary-text:      var(--on-primary);
    --btn-primary-border:    var(--color-primary);
    --btn-primary-hover-bg:  var(--primary-hover);
    --btn-secondary-bg:      transparent;
    --btn-secondary-text:    var(--color-text);
    --btn-secondary-border:  var(--border-strong);
    --btn-secondary-hover-bg: var(--surface-alt);
    --btn-danger-bg:         var(--color-danger);
    --btn-danger-text:       var(--on-danger);
    --btn-danger-hover-bg:   var(--danger-hover);

    /* Alerts */
    --alert-success-bg: var(--success-soft);
    --alert-success-border: var(--success-border);
    --alert-success-text: var(--success-text);
    --alert-danger-bg: var(--danger-soft);
    --alert-danger-border: var(--danger-border);
    --alert-danger-text: var(--danger-text);
    --alert-warning-bg: var(--warning-soft);
    --alert-warning-border: var(--warning-border);
    --alert-warning-text: var(--warning-text);
    --alert-info-bg: var(--primary-soft);
    --alert-info-border: var(--primary-border);
    --alert-info-text: var(--color-primary);

    /* Badges */
    --badge-neutral-bg: var(--neutral-soft);
    --badge-neutral-text: var(--neutral-text);
    --badge-neutral-border: var(--neutral-border);
    --badge-primary-bg: var(--primary-soft);
    --badge-primary-text: var(--color-primary);
    --badge-primary-border: var(--primary-border);
    --badge-success-bg: var(--success-soft);
    --badge-success-text: var(--success-text);
    --badge-success-border: var(--success-border);
    --badge-danger-bg: var(--danger-soft);
    --badge-danger-text: var(--danger-text);
    --badge-danger-border: var(--danger-border);
    --badge-warning-bg: var(--warning-soft);
    --badge-warning-text: var(--warning-text);
    --badge-warning-border: var(--warning-border);

    /* Inputs */
    --input-bg: var(--color-surface);
    --input-text: var(--color-text);
    --input-border: var(--border-strong);
    --input-focus-border: var(--color-primary);
    --input-placeholder: var(--color-text-muted);

    /* Tables */
    --table-header-bg: var(--surface-alt);
    --table-header-text: var(--color-text-muted);
    --table-border: var(--color-border);
    --table-row-hover: var(--hover-overlay);

    /* Topbar */
    --topbar-bg: var(--color-surface);
    --topbar-border: var(--color-border);
    --topbar-text: var(--color-text);
    --topbar-text-muted: var(--color-text-muted);
    --topbar-item-hover: var(--hover-overlay);
    --topbar-avatar-bg: var(--color-primary);
    --topbar-avatar-text: var(--on-primary);

    /* Sidebar */
    --sidebar-bg: var(--color-surface);
    --sidebar-border: var(--color-border);
    --sidebar-link: var(--color-text-muted);
    --sidebar-link-hover-bg: var(--surface-alt);
    --sidebar-link-hover-text: var(--color-text);
    --sidebar-link-active-bg: var(--primary-soft);
    --sidebar-link-active-text: var(--color-primary);
    --sidebar-link-active-border: var(--color-primary);

    /* Cards */
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);

    /* Structure (non-color, kept here for convenience) */
    --sidebar-w: 250px;
    --topbar-h: 44px;
}