/* NagApies: the storybook look, on top of the framework's site.css. Values come from the NagApies design system.
   Golden Hour is the light theme, Moonlit the dark. /brand.css loads after this file, so an accent chosen on the portal wins. */

@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("../lib/fonts/Alegreya-Regular.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("../lib/fonts/Alegreya-Italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("../lib/fonts/Alegreya-Bold.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../lib/fonts/AlegreyaSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../lib/fonts/AlegreyaSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../lib/fonts/AlegreyaSans-Bold.woff2") format("woff2"); }

:root, [data-bs-theme=light] {
    --nag-canvas: #FAF3E3; --nag-surface: #FFFBF2; --nag-subtle: #F1E7D2; --nag-border: #8E7C63; --nag-hairline: #E0D3BA;
    --nag-ink: #33261B; --nag-ink-2: #65523F; --nag-muted: #7A6853; --nag-on-ink: #FFFBF2; --nag-ink-pressed: #55432F;
    --nag-accent: #47713F; --nag-strong: #33562F; --nag-pale: #E6EED9; --nag-honey: #E3A93F; --nag-honey-pale: #FBEED0;
    --nag-success: #33693C; --nag-success-pale: #E3EFDD; --nag-warning: #7F5310; --nag-warning-pale: #FBEFD2;
    --nag-error: #A63D2F; --nag-error-pale: #F9E4DE; --nag-info: #35597F; --nag-info-pale: #E2ECF5;
    --nag-shadow: 0 1px 2px rgba(92,62,24,.10), 0 6px 18px rgba(92,62,24,.10);
    --nag-glow: 0 8px 28px rgba(227,169,63,.32);
    --da-brand: #47713F;
}
[data-bs-theme=dark] {
    --nag-canvas: #1F2A25; --nag-surface: #28352E; --nag-subtle: #33423A; --nag-border: #7E8C7E; --nag-hairline: #46554B;
    --nag-ink: #F7EFDF; --nag-ink-2: #CFC4AE; --nag-muted: #A79C89; --nag-on-ink: #28201A; --nag-ink-pressed: #E4DAC7;
    --nag-accent: #9CC48A; --nag-strong: #B6D7A5; --nag-pale: #2C4233; --nag-honey: #EBBC62; --nag-honey-pale: #3F3418;
    --nag-success: #8FCB95; --nag-success-pale: #25402E; --nag-warning: #E9BE6B; --nag-warning-pale: #42351A;
    --nag-error: #F2998A; --nag-error-pale: #47271F; --nag-info: #9CBEE0; --nag-info-pale: #25384A;
    --nag-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.25);
    --nag-glow: 0 8px 28px rgba(235,188,98,.22);
    --da-brand: #9CC48A;
}

/* Bootstrap, in the system's colours. */
:root, [data-bs-theme=light], [data-bs-theme=dark] {
    --bs-body-font-family: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-bg: var(--nag-surface); --bs-body-color: var(--nag-ink); --bs-emphasis-color: var(--nag-ink);
    --bs-secondary-color: var(--nag-ink-2); --bs-tertiary-color: var(--nag-muted);
    --bs-secondary-bg: var(--nag-subtle); --bs-tertiary-bg: var(--nag-canvas);
    --bs-border-color: var(--nag-hairline); --bs-border-color-translucent: var(--nag-hairline);
    --bs-link-color: var(--nag-strong); --bs-link-hover-color: var(--nag-ink);
    --bs-success-text-emphasis: var(--nag-success); --bs-success-bg-subtle: var(--nag-success-pale); --bs-success-border-subtle: transparent;
    --bs-warning-text-emphasis: var(--nag-warning); --bs-warning-bg-subtle: var(--nag-warning-pale); --bs-warning-border-subtle: transparent;
    --bs-danger-text-emphasis: var(--nag-error); --bs-danger-bg-subtle: var(--nag-error-pale); --bs-danger-border-subtle: transparent;
    --bs-info-text-emphasis: var(--nag-info); --bs-info-bg-subtle: var(--nag-info-pale); --bs-info-border-subtle: transparent;
    --bs-light-text-emphasis: var(--nag-ink); --bs-light-bg-subtle: var(--nag-subtle); --bs-light-border-subtle: transparent;
}
a { color: var(--nag-strong); }
a:hover { color: var(--nag-ink); }
.text-danger { color: var(--nag-error) !important; }
.text-success { color: var(--nag-success) !important; }
.text-brand { color: var(--nag-strong) !important; }

body { font-variant-numeric: lining-nums; background-color: var(--nag-canvas); background-image: url("../img/paper.svg"); }
[data-bs-theme=dark] body { background-image: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-6 { font-family: "Alegreya", Georgia, serif; font-weight: 700; }

/* Actions: the main button is ink, so it reads whatever accent the portal picks. */
.btn { --bs-btn-border-radius: 14px; --bs-btn-font-weight: 700; }
.btn-lg { --bs-btn-border-radius: 16px; }
.btn-brand {
    --bs-btn-bg: var(--nag-ink); --bs-btn-border-color: var(--nag-ink); --bs-btn-color: var(--nag-on-ink);
    --bs-btn-hover-bg: var(--nag-ink-pressed); --bs-btn-hover-border-color: var(--nag-ink-pressed); --bs-btn-hover-color: var(--nag-on-ink);
    --bs-btn-active-bg: var(--nag-ink-pressed); --bs-btn-active-border-color: var(--nag-ink-pressed); --bs-btn-active-color: var(--nag-on-ink);
    --bs-btn-disabled-bg: var(--nag-subtle); --bs-btn-disabled-border-color: var(--nag-subtle); --bs-btn-disabled-color: var(--nag-ink-2);
}
.btn-outline-brand, .btn-outline-secondary {
    --bs-btn-color: var(--nag-ink); --bs-btn-border-color: var(--nag-border); --bs-btn-bg: var(--nag-surface);
    --bs-btn-hover-bg: var(--nag-pale); --bs-btn-hover-color: var(--nag-ink); --bs-btn-hover-border-color: var(--nag-border);
    --bs-btn-active-bg: var(--nag-pale); --bs-btn-active-color: var(--nag-ink); --bs-btn-active-border-color: var(--nag-border);
}
.btn-danger {
    --bs-btn-bg: var(--nag-error); --bs-btn-border-color: var(--nag-error); --bs-btn-color: var(--nag-surface);
    --bs-btn-hover-bg: var(--nag-error); --bs-btn-hover-border-color: var(--nag-error); --bs-btn-hover-color: var(--nag-surface);
}
.btn-outline-danger {
    --bs-btn-color: var(--nag-error); --bs-btn-border-color: var(--nag-error);
    --bs-btn-hover-bg: var(--nag-error-pale); --bs-btn-hover-color: var(--nag-error); --bs-btn-hover-border-color: var(--nag-error);
}
:focus-visible { outline: 3px solid var(--nag-accent); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; outline: 3px solid var(--nag-accent); outline-offset: 2px; }

/* Forms. */
.form-control, .form-select { border-color: var(--nag-border); border-radius: 12px; }
.form-control::placeholder { color: var(--nag-muted); }
.form-control:focus, .form-select:focus { border-color: var(--nag-accent); }
.form-check-input { border-color: var(--nag-border); }
.form-check-input:checked { background-color: var(--da-brand); border-color: var(--da-brand); }

/* Surfaces. */
.card { --bs-card-bg: var(--nag-surface); border-radius: 20px; box-shadow: var(--nag-shadow); }
.da-tile { border-radius: 20px; background: var(--nag-surface); box-shadow: var(--nag-shadow); }
.da-tile:hover { outline: 3px solid var(--nag-accent); }
.da-tile .material-icons, .da-empty .material-icons { color: var(--nag-accent); }
.da-nav { background: var(--nag-surface); }
.nav-link.active { color: var(--nag-strong) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--nag-pale); --bs-nav-pills-link-active-color: var(--nag-strong); --bs-nav-link-color: var(--nag-ink-2); --bs-nav-link-hover-color: var(--nag-ink); }
.dropdown-menu { --bs-dropdown-bg: var(--nag-surface); --bs-dropdown-link-hover-bg: var(--nag-pale); --bs-dropdown-link-active-bg: var(--nag-pale); --bs-dropdown-link-active-color: var(--nag-ink); border-radius: 14px; box-shadow: var(--nag-shadow); }
.modal-content { --bs-modal-bg: var(--nag-surface); border-radius: 28px; }
.alert { border-radius: 14px; }
.da-banner { background: var(--nag-honey-pale); border-bottom-color: var(--nag-hairline); }
.da-badge-brand { background: var(--nag-pale); color: var(--nag-strong); }
.da-plan.current { border-color: var(--nag-accent); }
.da-avatar, .da-avatar-empty { background: var(--nag-subtle); }
.text-bg-warning { background-color: var(--nag-warning-pale) !important; color: var(--nag-warning) !important; }
.text-bg-danger { background-color: var(--nag-error-pale) !important; color: var(--nag-error) !important; }
.text-bg-light { background-color: var(--nag-subtle) !important; color: var(--nag-ink) !important; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--nag-pale); --bs-table-hover-color: var(--nag-ink); --bs-table-color: var(--nag-ink); }

/* The logo. */
.da-mark { width: 36px; height: 36px; border-radius: 12px; display: block; }

/* The hero: a wash of woodland light with fireflies, and the words on a Story Panel. Painted art replaces the wash later. */
.da-hero {
    color: var(--nag-ink); border-radius: 28px; box-shadow: var(--nag-shadow);
    background:
        radial-gradient(circle 5px at 82% 22%, var(--nag-honey) 60%, transparent 100%),
        radial-gradient(circle 4px at 91% 58%, var(--nag-honey) 60%, transparent 100%),
        radial-gradient(circle 6px at 72% 74%, var(--nag-honey) 60%, transparent 100%),
        radial-gradient(circle 3px at 66% 34%, var(--nag-honey) 60%, transparent 100%),
        radial-gradient(circle 4px at 95% 86%, var(--nag-honey) 60%, transparent 100%),
        radial-gradient(ellipse 60% 90% at 88% 10%, var(--nag-honey-pale), transparent 70%),
        linear-gradient(160deg, var(--nag-pale), var(--nag-subtle));
}
.da-hero .lead { opacity: 1; font-family: "Alegreya", Georgia, serif; font-size: 1.25rem; line-height: 1.5; }
.nag-panel { max-width: 34rem; padding: 1.5rem 1.75rem; border-radius: 20px; background: color-mix(in srgb, var(--nag-surface) 88%, transparent); }