/* ============================================================
   BioSimDB Theme Tokens
   - Keep all shared color decisions in one place.
   - home.css and webform.css consume these variables.
   ============================================================ */

:root {
    /* Core palette */
    --color-brand-dark: #17324d;
    --color-brand: #2878b5;
    --color-brand-hover: #1f6498;
    --color-brand-soft: #5387b0;
    --color-link: #b369fd;

    /* Surfaces and borders */
    --color-page-bg: #f8f9fa;
    --color-page-shell: #f2f4f7;
    --color-surface: #ffffff;
    --color-surface-muted: #f7f8fa;
    --color-info-bg: #f2f7fb;
    --color-border-subtle: #edf0f3;
    --color-border-soft: #dfe5ea;
    --color-border-field: #d9dee5;
    --color-divider: #e5e7eb;

    /* Text and state */
    --color-text-main: #17324d;
    --color-text-muted: #4b5563;
    --color-text-soft: #6b7280;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: hsla(0, 0%, 100%, 0.85);
    --color-placeholder: #adb5bd;
    --color-hover-overlay: #0154c92b;

    /* Guidance block */
    --color-guidance-bg: #e8f4fd;
    --color-guidance-border: #b8d9f0;
    --color-guidance-text: #1a3a5c;

    /* Effects */
    --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.08);
    --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.04);
    --focus-ring: 0 0 0 0.2rem rgba(40, 120, 181, 0.15);

    /* Typography */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Backward-compat alias consumed by Joomla head partial */
    --link-color: var(--color-link);
}

/* ============================================================
   Base Document Styling
   ============================================================ */

body {
    background-color: var(--color-page-bg);
    color: var(--color-text-main);
    font-family: var(--bs-font-sans-serif) !important;
}

h6, h5, h4, h3, h2, h1, th, b {
    color: var(--color-text-main) !important;
    font-family: var(--bs-font-sans-serif);
}

/* ============================================================
   Shared Utility Styling
   ============================================================ */

th,
td {
    padding-top: 5px;
}

.page-item.active .page-link {
    color: var(--color-text-on-dark) !important;
    background: var(--color-hover-overlay) !important;
    border: var(--color-hover-overlay) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-placeholder) !important;
    opacity: 1;
    font-style: italic;
}

.guidance-box {
    background-color: var(--color-guidance-bg);
    border: 1px solid var(--color-guidance-border);
    border-radius: 0.375rem;
    color: var(--color-guidance-text);
    padding: 1rem;
}