/* colors.css
 * Light theme colors.
 */

:root {
    /* page background */
    --app-bg: #f2f2f2;
    /* page background gradient */
    --app-bg-grad:
        radial-gradient(1200px 800px at 6% -10%, rgba(132, 212, 166, 0.16), transparent 60%),
        radial-gradient(900px 700px at 94% 0%, rgba(92, 180, 214, 0.14), transparent 55%),
        radial-gradient(800px 600px at 52% 110%, rgba(255, 198, 109, 0.14), transparent 60%);

    /* primary surface */
    --app-surface: #ffffff;
    /* inner surface */
    --app-surface-2: #f5f5f5;
    /* surface gradient */
    --app-surface-grad: linear-gradient(180deg, #ffffff, #f6f6f6);

    /* primary text */
    --app-text: #2f2f2f;
    /* muted text */
    --app-text-muted: #6f6f6f;
    /* nav list text */
    --app-text-nav: #2f2f2f;
    /* topbar text */
    --app-text-topbar: #ffffff;
    /* topbar muted text */
    --app-text-topbar-muted: rgba(255, 255, 255, 0.8);

    /* borders */
    --app-border: rgba(0, 0, 0, 0.08);
    /* hover border for buttons/controls */
    --app-border-hover: rgba(0, 0, 0, 0.18);

    /* brand / accents */
    --app-primary: #3aa56b;
    --app-primary-2: #f0b14a;

    /* status base colors */
    --app-success: #31b37a;
    --app-warning: #f0b14a;
    --app-danger:  #e15b52;

    /* focus ring */
    --app-focus: rgba(58, 165, 107, 0.22);

    /* shadows */
    --app-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
    --app-glow: rgba(58, 165, 107, 0.25);
    --app-topbar-bg: #3aa56b;
    --app-topbar-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* primary button text */
    --app-btn-primary-text: #ffffff;
    /* primary button text shadow */
    --app-btn-primary-text-shadow: none;
    /* primary button border */
    --app-btn-primary-border: rgba(31, 122, 83, 0.45);

    /* status borders (alerts/states) */
    --app-status-success-border: rgba(49, 179, 122, 0.35);
    --app-status-warning-border: rgba(240, 177, 74, 0.45);
    --app-status-danger-border: rgba(225, 91, 82, 0.45);

    /* health badges */
    --app-badge-success-border: rgba(49, 179, 122, 0.45);
    --app-badge-success-bg: rgba(49, 179, 122, 0.12);
    --app-badge-danger-border: rgba(225, 91, 82, 0.55);
    --app-badge-danger-bg: rgba(225, 91, 82, 0.12);
    --app-badge-warning-border: rgba(240, 177, 74, 0.55);
    --app-badge-warning-bg: rgba(240, 177, 74, 0.12);

    /* link underline */
    --app-link-underline: rgba(58, 165, 107, 0.35);
    --app-link-underline-hover: rgba(58, 165, 107, 0.6);
    /* link text */
    --app-link-text: var(--app-text);
    --app-link-text-hover: var(--app-text);

    /* nav active shadows */
    --app-nav-active-shadow: 0 0 0 1px var(--app-glow), 0 10px 24px rgba(0, 0, 0, 0.18);
    --app-nav-sub-active-shadow: 0 0 0 1px var(--app-glow), 0 8px 18px rgba(0, 0, 0, 0.16);

    /* topbar search focus */
    --app-topsearch-focus-border: rgba(58, 165, 107, 0.45);
    /* topbar search button */
    --app-topsearch-btn-bg: #1f7a53;
    --app-topsearch-btn-text: #ffffff;
    /* topbar search button border (light theme) */
    --app-topsearch-btn-border-light: rgba(31, 122, 83, 0.45);

    /* notification badge */
    --app-notif-badge-border: rgba(0, 0, 0, 0.25);
    --app-notif-badge-bg: rgba(225, 91, 82, 0.95);
    --app-notif-badge-text: #ffffff;
    --app-notif-badge-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    /* notification chip (title/pill) */
    --app-notif-chip-border: rgba(240, 177, 74, 0.55);
    --app-notif-chip-bg: rgba(240, 177, 74, 0.12);

    /* datepicker */
    --app-dp-bg: #ffffff;
    --app-dp-text: #111;
    --app-dp-border: rgba(0, 0, 0, 0.14);
    --app-dp-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
    --app-dp-btn-border: rgba(0, 0, 0, 0.14);
    --app-dp-btn-bg: rgba(0, 0, 0, 0.03);
    --app-dp-btn-text: inherit;
    --app-dp-day-hover-bg: rgba(0, 0, 0, 0.06);
    --app-dp-day-today-border: rgba(0, 0, 0, 0.18);
    --app-dp-day-selected-bg: rgba(0, 0, 0, 0.12);
    --app-dp-actions-border: rgba(0, 0, 0, 0.10);
}