/*
 * Dayalogs design foundations.
 *
 * Source: Claude Design handoff "Dayalogs Design System" fetched 2026-06-02.
 * The brand taupe is PANTONE Warm Gray 11 C: #6E6259 / RGB 110,98,89.
 */
:root {
    --dayalogs-brand: #6E6259;
    --dayalogs-brand-hover: #5e534c;
    --dayalogs-bg: #fcfaf7;
    --dayalogs-bg-public: #fbfaf7;
    --dayalogs-surface: #fffdfa;
    --dayalogs-surface-soft: #f7f2ec;
    --dayalogs-surface-active: #f4efe8;
    --dayalogs-surface-elev: #ffffff;
    --dayalogs-text-strong: #352f2b;
    --dayalogs-text: #6E6259;
    --dayalogs-muted: #8b8377;
    --dayalogs-on-brand: #f4efe8;
    --dayalogs-on-primary: #ffffff;
    --dayalogs-line: #e9e1d7;
    --dayalogs-line-soft: #f3eee8;
    --dayalogs-rule: #dfe4e2;
    --dayalogs-primary: var(--dayalogs-brand);
    --dayalogs-primary-hover: var(--dayalogs-brand-hover);
    --dayalogs-primary-soft: rgba(110, 98, 89, 0.14);
    --dayalogs-success: #afbeaa;
    --dayalogs-success-bg: #eef3ea;
    --dayalogs-success-fg: #667b61;
    --dayalogs-danger: #ee9487;
    --dayalogs-danger-bg: #fdf1ee;
    --dayalogs-danger-fg: #bd6a5e;
    --dayalogs-danger-line: #f3cbc3;
    --dayalogs-warning-bg: #fbf6dc;
    --dayalogs-warning-fg: #98864e;
    --dayalogs-warning-line: #eee2a3;
    --dayalogs-accent: #c7a15b;
    --dayalogs-warn-public: #b14d42;
    --dayalogs-dark-nav: #352f2b;
    --dayalogs-dark-hero: #2a2420;
    --dayalogs-focus-ring: 0 0 0 0.2rem rgba(209, 193, 179, 0.22);
    --dayalogs-focus-ring-public: 0 0 0 3px var(--dayalogs-primary-soft);

    --dayalogs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dayalogs-font-serif: "Source Serif 4", Georgia, serif;
    --dayalogs-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --dayalogs-radius-sm: 0.6rem;
    --dayalogs-radius: 0.8rem;
    --dayalogs-radius-md: 0.95rem;
    --dayalogs-radius-lg: 1.45rem;
    --dayalogs-radius-panel: 18px;
    --dayalogs-radius-pill: 999px;
    --dayalogs-radius-sharp: 0;

    --dayalogs-shadow-sm: 0 0.65rem 1.7rem rgba(80, 70, 58, 0.12);
    --dayalogs-shadow-menu: 0 0.8rem 1.8rem rgba(80, 70, 58, 0.16);
    --dayalogs-shadow-modal: 0 1rem 2.5rem rgba(53, 47, 43, 0.18);
    --dayalogs-shadow-panel: 0 24px 80px rgba(53, 47, 43, 0.18);

    --dayalogs-gutter: clamp(18px, 4vw, 48px);
    --dayalogs-maxw: 1180px;
    --dayalogs-maxw-narrow: 860px;

    --bs-body-font-family: var(--dayalogs-font-sans);
    --bs-body-bg: var(--dayalogs-bg);
    --bs-body-color: var(--dayalogs-text);
    --bs-primary: var(--dayalogs-primary);
    --bs-primary-rgb: 110, 98, 89;
    --bs-link-color: var(--dayalogs-primary);
    --bs-link-hover-color: var(--dayalogs-primary-hover);
    --bs-border-color: var(--dayalogs-line);
    --bs-border-radius: var(--dayalogs-radius);
}

.dayalogs-admin {
    background: var(--dayalogs-bg);
    color: var(--dayalogs-text);
    font-family: var(--dayalogs-font-sans);
}

.dayalogs-public {
    background: var(--dayalogs-bg-public);
    color: var(--dayalogs-text-strong);
    font-family: var(--dayalogs-font-sans);
}

.dayalogs-eyebrow {
    color: var(--dayalogs-primary);
    font-family: var(--dayalogs-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}