/*
 * Zendaita Notifications — Shared Design Tokens
 *
 * Host apps can override any of these custom properties to theme
 * the notification components to match their own design system.
 */

:root {
    /* Brand / semantic colours */
    --zn-primary: #2563eb;
    --zn-danger: #dc2626;
    --zn-warning: #f59e0b;
    --zn-success: #16a34a;
    --zn-muted: #6b7280;

    /* Surfaces */
    --zn-bg: #ffffff;
    --zn-bg-hover: #f3f4f6;
    --zn-bg-unread: #eff6ff;
    --zn-bg-subtle: #EDF2F7;
    --zn-header-bg: #F7F9FC;
    --zn-border: #e5e7eb;

    /* Accent and status channels, as rgb triples so components can compose alphas */
    --zn-accent-rgb: 16, 113, 185;
    --zn-accent-on-dark: #8ec3f0;
    --zn-success-rgb: 56, 161, 105;

    /* Typography */
    --zn-text: #111827;
    --zn-text-secondary: #6b7280;
    --zn-text-muted: #A0AEC0;
    --zn-font-family: inherit;
    --zn-font-size-xs: 0.75rem;
    --zn-font-size-sm: 0.8125rem;
    --zn-font-size-base: 0.875rem;

    /* Elevation & shape */
    --zn-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --zn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --zn-radius: 8px;
    --zn-radius-sm: 4px;
    --zn-radius-md: 10px;

    /* Component sizing */
    --zn-bell-size: 40px;
    /* The glyph, at the size the Daitalens navbar shipped it. The 40px above is the hit target
       around it, not the drawing. */
    --zn-bell-icon-size: 17px;
    /* The bell's own palette. The body is a vertical gradient from the highlight down to the
       accent, the crown is capped in the warning colour, and the outline lifts it off the bar.
       A host that sets --zn-accent-rgb gets a bell in its own colours for free. */
    --zn-bell-highlight: #4FCAFF;
    /* The preferences gear, drawn in the same family as the bell. The lit centre is the one
       colour it does not share — it marks the control as live rather than decorative. */
    --zn-gear-size: 17px;
    --zn-gear-highlight: #4FCAFF;
    --zn-gear-outline: #ffffff;
    --zn-gear-dot: #10B981;
    --zn-bell-cap: var(--zn-warning, #f59e0b);
    --zn-bell-outline: #ffffff;
    /* The ring that separates the bell's badge and disconnected dot from the glyph. Set these
       to whatever the host paints behind the bell — usually the navbar, not the page. */
    --zn-bell-ring: var(--zn-bg, #ffffff);
    --zn-bell-ring-dark: #1a1d27;
    --zn-toast-width: 360px;
    --zn-panel-width: 380px;
    --zn-panel-max-height: 70vh;

    /* Priority colour mapping */
    --zn-priority-critical: #dc2626;
    --zn-priority-high: #f59e0b;
    --zn-priority-normal: transparent;
    --zn-priority-low: #9ca3af;

    /* Animation */
    --zn-transition-fast: 150ms ease;
    --zn-transition-normal: 250ms ease;
}