/* Basic styles for Vora */
:root {
    --app-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --white: #ffffff;
    --text: #142338;
    --text-dark: var(--text);
    --text-bright: #ffffff;
    --muted: #64748b;
    --body-bg: #f4f6f7;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #eef4ff;
    --border: #d8e2ef;
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 4px;
    --danger: #ef4444;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --input-bg: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
    --table-bg: var(--panel);
    --thead-bg: color-mix(in srgb, var(--panel-soft) 72%, var(--panel) 28%);
    --total-bg: color-mix(in srgb, var(--panel-soft) 78%, var(--panel) 22%);
    --summary-bg-end: color-mix(in srgb, var(--panel) 72%, var(--bg) 28%);
    --border-soft: color-mix(in srgb, var(--border) 64%, transparent);

    --primary-soft: color-mix(in srgb, var(--primary) 14%, var(--panel) 86%);
    --primary-soft-hover: color-mix(in srgb, var(--primary) 22%, var(--panel) 78%);
    --secondary-btn-bg: color-mix(in srgb, var(--primary) 10%, var(--panel) 90%);
    --secondary-btn-border: color-mix(in srgb, var(--primary) 18%, var(--border) 82%);
    --dark-surface: color-mix(in srgb, var(--panel-soft) 68%, var(--text) 32%);

    --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--panel) 88%);

    --primary-glow: color-mix(in srgb, var(--primary) 20%, transparent);
    --primary-glow-strong: color-mix(in srgb, var(--primary) 34%, transparent);
    --primary-glow-hover: color-mix(in srgb, var(--primary) 42%, transparent);

    --shadow-soft: rgba(15, 23, 42, 0.08);
    --shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

* {
    font-family: var(--app-font);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}