/*
 * 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;

    /* Authenticated admin typography: compact, role-based and intentionally small. */
    --dayalogs-admin-font-size-h1: 1.5rem;
    --dayalogs-admin-font-size-h2: 1.25rem;
    --dayalogs-admin-font-size-h3: 1.125rem;
    --dayalogs-admin-font-size-h4: 1rem;
    --dayalogs-admin-font-size-body: 0.875rem;
    --dayalogs-admin-font-size-small: 0.75rem;
    --dayalogs-admin-font-size-kpi: 2rem;
    --dayalogs-admin-font-size-kpi-lg: 3rem;
    --dayalogs-admin-font-weight-regular: 400;
    --dayalogs-admin-font-weight-semibold: 600;
    --dayalogs-admin-font-weight-bold: 700;

    /* Public website typography: compact content roles, independent from admin. */
    --dayalogs-public-font-size-display: clamp(3.5rem, calc(4vw + 1rem), 4rem);
    --dayalogs-public-font-size-h1: 2.25rem;
    --dayalogs-public-font-size-h2: 1.75rem;
    --dayalogs-public-font-size-h3: 1.375rem;
    --dayalogs-public-font-size-h4: 1.125rem;
    --dayalogs-public-font-size-h5: 0.9375rem;
    --dayalogs-public-font-size-h6: 0.75rem;
    --dayalogs-public-font-size-body: var(--dayalogs-public-font-size-h5);
    --dayalogs-public-font-size-micro: 0.625rem;

    /* Respondent renderer typography: same compact hierarchy, separately owned. */
    --dayalogs-survey-font-size-display: clamp(2.5rem, 4vw, 3rem);
    --dayalogs-survey-font-size-h1: 2.25rem;
    --dayalogs-survey-font-size-h2: 1.75rem;
    --dayalogs-survey-font-size-h3: 1.375rem;
    --dayalogs-survey-font-size-h4: 1.125rem;
    --dayalogs-survey-font-size-h5: 0.9375rem;
    --dayalogs-survey-font-size-h6: 0.75rem;
    --dayalogs-survey-font-size-body: var(--dayalogs-survey-font-size-h5);
    --dayalogs-survey-font-size-control: 1rem;
    --dayalogs-survey-font-size-micro: 0.625rem;

    /* Public and respondent content use four named weights at most. */
    --dayalogs-content-font-weight-light: 300;
    --dayalogs-content-font-weight-regular: 400;
    --dayalogs-content-font-weight-medium: 500;
    --dayalogs-content-font-weight-bold: 700;

    --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;
}