/* ==========================================================================
   Elysian IQ — shared design tokens
   ==========================================================================
   Loaded globally (see index.html), BEFORE app.css and any page's own
   <style> block, so every existing page keeps rendering exactly as before —
   nothing here overrides anything yet, it only ADDS variables for pages to
   opt into.

   Where these values come from: AdminDashboard.razor already had its own
   :root block (--admin-dash-accent/ink/muted/border/warn/warn-soft/
   warn-border) with real, already-in-use values. Those are promoted here
   unchanged, under a shared --eq- prefix ("Elysian IQ"), so Home.razor,
   AppointmentPage.razor, and future screens can reference the SAME tokens
   instead of each page re-declaring its own copy of the same colors.
   --eq-success-* / --eq-danger-* are new additions, chosen to match the
   existing --admin-dash-warn-soft "light tint" pattern (light backgrounds
   for status chips/badges) rather than introducing an unrelated palette.

   This file intentionally does NOT touch the public marketing "/welcome"
   page's pink/teal brand palette (--ei-*, defined locally in
   WelcomeText.razor) — that page is a deliberately bolder, separate visual
   identity for prospective-hospital marketing, distinct from this internal
   admin/staff tool chrome. Do not merge the two palettes.
   ========================================================================== */

:root {
    /* Core neutrals / text — from AdminDashboard.razor's original :root */
    --eq-ink: #1f2430;
    --eq-muted: #6b7280;
    --eq-border: #e6e8ec;
    --eq-surface: #ffffff;
    --eq-surface-muted: #f5f6f8;

    /* Primary accent — AdminDashboard.razor's original blue */
    --eq-accent: #2563eb;
    --eq-accent-soft: #eef3ff;

    /* Warning — AdminDashboard.razor's original amber */
    --eq-warn: #b45309;
    --eq-warn-soft: #fff7ed;
    --eq-warn-border: #fdba74;

    /* Success — new, same light-tint pattern as warn above */
    --eq-success: #059669;
    --eq-success-soft: #ecfdf5;
    --eq-success-border: #6ee7b7;

    /* Danger — new, same light-tint pattern as warn above */
    --eq-danger: #dc2626;
    --eq-danger-soft: #fef2f2;
    --eq-danger-border: #fca5a5;

    /* Spacing / shape — matching the radii already used across
       AdminDashboard.razor's cards, chips and nav items */
    --eq-radius-sm: 10px;
    --eq-radius-md: 12px;
    --eq-radius-lg: 14px;
    --eq-shadow-sm: 0 1px 2px rgba(15, 18, 25, 0.06);
    --eq-shadow-md: 0 4px 16px rgba(15, 18, 25, 0.08);

    --eq-font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Small shared primitives, built only on the tokens above. Opt-in — apply
   these classes on new/redesigned screens; nothing existing references them
   yet, so adding this section changes no page's current appearance.
   ========================================================================== */

/* Page header title/subtitle pair — the same pattern AdminDashboard.razor's
   .admin-dash-title / .admin-dash-subtitle already establish locally. */
.eq-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--eq-ink);
    line-height: 1.2;
}

.eq-page-subtitle {
    font-size: 0.9rem;
    color: var(--eq-muted);
    margin-top: 2px;
}

/* Soft status chip — accent/warn/success/danger variants, same light-tint
   look as AdminDashboard.razor's existing warning banner. */
.eq-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--eq-accent-soft);
    color: var(--eq-accent);
}

.eq-chip-warn {
    background: var(--eq-warn-soft);
    color: var(--eq-warn);
    border-color: var(--eq-warn-border);
}

.eq-chip-success {
    background: var(--eq-success-soft);
    color: var(--eq-success);
    border-color: var(--eq-success-border);
}

.eq-chip-danger {
    background: var(--eq-danger-soft);
    color: var(--eq-danger);
    border-color: var(--eq-danger-border);
}

/* Card surface — a plain content panel, for screens that don't already
   define their own card look. */
.eq-card {
    background: var(--eq-surface);
    border: 1px solid var(--eq-border);
    border-radius: var(--eq-radius-lg);
    box-shadow: var(--eq-shadow-sm);
    padding: 18px 20px;
}