/*
 * Plannflow Blue design system
 * Keep brand, surface and semantic color decisions centralized here.
 */
:root {
    /* Typography */
    --pf-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pf-font-size-xs: 12px;
    --pf-font-size-caption: 13px;
    --pf-font-size-sm: 14px;
    --pf-font-size-menu: 14px;
    --pf-font-size-base: 15px;
    --pf-font-size-md: 17px;
    --pf-font-size-lg: 20px;
    --pf-font-size-xl: 24px;
    --pf-line-height-base: 1.55;

    /* Brand */
    --pf-primary: #267aba;
    --pf-primary-rgb: 38, 122, 186;
    --pf-primary-hover: #003c73;
    --pf-primary-deep: #003c73;
    --pf-primary-deep-rgb: 0, 60, 115;
    --pf-primary-light: #62b9f2;
    --pf-primary-pale: #d8efff;
    --pf-primary-soft: #eef7ff;
    --pf-primary-faint: #f4f7fa;
    --pf-accent: #22c3a6;
    --pf-accent-rgb: 34, 195, 166;
    --pf-accent-hover: #0f7668;
    --pf-accent-soft: #e6f8f4;

    /* Neutral surfaces */
    --pf-ink: #163b5c;
    --pf-ink-rgb: 22, 59, 92;
    --pf-text: #163b5c;
    --pf-muted: #607889;
    --pf-subtle: #607889;
    --pf-canvas: #f4f7fa;
    --pf-canvas-rgb: 244, 247, 250;
    --pf-surface: #ffffff;
    --pf-surface-muted: #f8fbfd;
    --pf-border: #d6e3ee;
    --pf-border-strong: #b9cee0;
    --pf-border-translucent: rgba(var(--pf-ink-rgb), .14);
    --pf-on-primary: #ffffff;
    --pf-on-dark: #f3f8fb;
    --pf-on-dark-muted: #d8efff;
    --pf-on-dark-subtle: #b9d8ee;

    /* Semantic colors: never use these as decorative brand variants. */
    --pf-success: #20a875;
    --pf-success-rgb: 32, 168, 117;
    --pf-success-soft: #e8f7f1;
    --pf-warning: #e9a23b;
    --pf-warning-rgb: 233, 162, 59;
    --pf-warning-soft: #fff5e5;
    --pf-danger: #d9534f;
    --pf-danger-rgb: 217, 83, 79;
    --pf-danger-soft: #fcebea;

    /* Shared effects */
    --pf-primary-gradient: var(--pf-primary);
    --pf-primary-gradient-soft: linear-gradient(135deg, var(--pf-primary-soft), var(--pf-primary-pale));
    --pf-deep-gradient: linear-gradient(145deg, #163b5c, var(--pf-primary-deep));
    --pf-focus-ring: 0 0 0 .2rem rgba(var(--pf-primary-rgb), .18);
    --pf-shadow-sm: 0 2px 8px rgba(var(--pf-primary-deep-rgb), .06);
    --pf-shadow-md: 0 8px 24px rgba(var(--pf-primary-deep-rgb), .09);
    --pf-radius-sm: 6px;
    --pf-radius: 9px;
    --pf-radius-lg: 10px;
    --pf-button-radius: 8px;
    --pf-button-weight: 600;
    --pf-button-focus: rgba(var(--pf-primary-rgb), .25);

    /* Feature-level aliases */
    --pf-project-primary: var(--pf-primary);
    --pf-project-primary-rgb: var(--pf-primary-rgb);

    /* Legacy template aliases */
    --body-bg-rgb: var(--pf-canvas-rgb);
    --primary-rgb: var(--pf-primary-rgb);
    --secondary-rgb: var(--pf-primary-deep-rgb);
    --success-rgb: var(--pf-success-rgb);
    --warning-rgb: var(--pf-warning-rgb);
    --danger-rgb: var(--pf-danger-rgb);
    --info-rgb: var(--pf-primary-rgb);
    --default-body-bg-color: var(--pf-canvas);
    --primary-color: var(--pf-primary);
    --primary-border: var(--pf-primary);
    --primary005: rgba(var(--pf-primary-rgb), .05);
    --primary01: rgba(var(--pf-primary-rgb), .1);
    --primary02: rgba(var(--pf-primary-rgb), .2);
    --primary03: rgba(var(--pf-primary-rgb), .3);
    --primary04: rgba(var(--pf-primary-rgb), .4);
    --primary05: rgba(var(--pf-primary-rgb), .5);
    --primary06: rgba(var(--pf-primary-rgb), .6);
    --primary07: rgba(var(--pf-primary-rgb), .7);
    --primary08: rgba(var(--pf-primary-rgb), .8);
    --primary09: rgba(var(--pf-primary-rgb), .9);
    --default-text-color: var(--pf-ink);
    --default-border: var(--pf-border);
    --default-background: var(--pf-canvas);
    --menu-bg: var(--pf-surface);
    --menu-prime-color: var(--pf-muted);
    --menu-border-color: var(--pf-border);
    --header-bg: var(--pf-surface);
    --header-prime-color: var(--pf-muted);
    --header-border-color: var(--pf-border);
    --custom-white: var(--pf-surface);
    --bootstrap-card-border: var(--pf-border);
    --list-hover-focus-bg: var(--pf-primary-faint);
    --text-muted: var(--pf-muted);
    --input-border: var(--pf-border);
    --form-control-bg: var(--pf-surface);

    /* Marketing aliases used by both landing-page variants */
    --ink: var(--pf-ink);
    --cream: var(--pf-canvas);
    --paper: var(--pf-canvas);
    --green: var(--pf-primary-deep);
    --lime: var(--pf-primary-light);
    --navy: var(--pf-primary-deep);
    --blue: var(--pf-primary);
    --cyan: var(--pf-primary-light);
    --mist: var(--pf-primary-soft);
    --muted: var(--pf-muted);
    --line: var(--pf-border-translucent);
    --white: var(--pf-surface);

    /* Bootstrap aliases */
    --bs-primary: var(--pf-primary);
    --bs-primary-rgb: var(--pf-primary-rgb);
    --bs-secondary: var(--pf-primary-deep);
    --bs-secondary-rgb: var(--pf-primary-deep-rgb);
    --bs-link-color: var(--pf-primary);
    --bs-link-hover-color: var(--pf-primary-hover);
    --bs-body-color: var(--pf-ink);
    --bs-body-bg: var(--pf-canvas);
    --bs-border-color: var(--pf-border);
    --bs-font-sans-serif: var(--pf-font-family);
    --bs-success: var(--pf-success);
    --bs-success-rgb: var(--pf-success-rgb);
    --bs-warning: var(--pf-warning);
    --bs-warning-rgb: var(--pf-warning-rgb);
    --bs-danger: var(--pf-danger);
    --bs-danger-rgb: var(--pf-danger-rgb);
    --bs-info: var(--pf-primary-light);
    --bs-info-rgb: 100, 181, 210;
    --bs-border-radius: var(--pf-radius);
    --bs-border-radius-sm: var(--pf-radius-sm);
    --bs-border-radius-lg: var(--pf-radius-lg);
}

/* Application shell */
html,
body,
button,
input,
select,
textarea {
    font-family: var(--pf-font-family, "Inter", "Segoe UI", sans-serif);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html:not([data-theme-mode="dark"]) body {
    color: var(--pf-ink);
    background: var(--pf-canvas);
}

html:not([data-theme-mode="dark"]) .page,
html:not([data-theme-mode="dark"]) .area-page {
    background-color: var(--pf-canvas) !important;
}

html:not([data-theme-mode="dark"]) .app-header {
    border-bottom: 1px solid var(--pf-border);
    background: var(--pf-surface) !important;
    box-shadow: 0 1px 4px rgba(var(--pf-primary-deep-rgb), .04);
}

html:not([data-theme-mode="dark"]) .main-header-container {
    min-height: 4rem;
}

html:not([data-theme-mode="dark"]) .header-link,
html:not([data-theme-mode="dark"]) .header-link-icon {
    color: var(--pf-text);
}

html:not([data-theme-mode="dark"]) .header-link:hover,
html:not([data-theme-mode="dark"]) .header-link:hover .header-link-icon {
    color: var(--pf-primary);
}

html:not([data-theme-mode="dark"]) .header-link {
    border-radius: var(--pf-radius-sm);
    transition: color .16s ease, background-color .16s ease;
}

html:not([data-theme-mode="dark"]) .header-link:hover,
html:not([data-theme-mode="dark"]) .header-link:focus-visible {
    background: var(--pf-primary-soft);
}

html:not([data-theme-mode="dark"]) #content-page {
    color: var(--pf-ink);
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
}

html:not([data-theme-mode="dark"]) .card,
html:not([data-theme-mode="dark"]) .custom-card,
html:not([data-theme-mode="dark"]) .modal-content,
html:not([data-theme-mode="dark"]) .dropdown-menu,
html:not([data-theme-mode="dark"]) .offcanvas {
    border-color: var(--pf-border);
    background-color: var(--pf-surface);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
}

html:not([data-theme-mode="dark"]) .card-header,
html:not([data-theme-mode="dark"]) .card-footer,
html:not([data-theme-mode="dark"]) .modal-header,
html:not([data-theme-mode="dark"]) .modal-footer {
    border-color: var(--pf-border);
    background-color: var(--pf-surface);
}

html:not([data-theme-mode="dark"]) .card,
html:not([data-theme-mode="dark"]) .custom-card {
    border-width: 1px;
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-sm);
}

html:not([data-theme-mode="dark"]) .card-header,
html:not([data-theme-mode="dark"]) .card-footer {
    padding: .9rem 1rem;
}

html:not([data-theme-mode="dark"]) .card-title,
html:not([data-theme-mode="dark"]) .modal-title,
html:not([data-theme-mode="dark"]) h1,
html:not([data-theme-mode="dark"]) h2,
html:not([data-theme-mode="dark"]) h3,
html:not([data-theme-mode="dark"]) h4,
html:not([data-theme-mode="dark"]) h5,
html:not([data-theme-mode="dark"]) h6 {
    color: var(--pf-ink);
}

html:not([data-theme-mode="dark"]) .table {
    --bs-table-color: var(--pf-text);
    --bs-table-bg: var(--pf-surface);
    --bs-table-border-color: var(--pf-border);
    --bs-table-striped-bg: var(--pf-primary-faint);
    --bs-table-hover-bg: var(--pf-primary-soft);
}

html:not([data-theme-mode="dark"]) .table > :not(caption) > * > * {
    padding: .72rem .8rem;
    border-bottom-color: var(--pf-border);
    box-shadow: none;
}

html:not([data-theme-mode="dark"]) .table > thead > tr > th,
html:not([data-theme-mode="dark"]) .table .thead-light th {
    border-bottom-width: 1px;
    color: var(--pf-text);
    background: var(--pf-primary-faint);
    font-size: var(--pf-font-size-sm);
    font-weight: 650;
}

html:not([data-theme-mode="dark"]) .table-hover > tbody > tr:hover > * {
    background: var(--pf-primary-soft);
}

html:not([data-theme-mode="dark"]) .form-control,
html:not([data-theme-mode="dark"]) .form-select,
html:not([data-theme-mode="dark"]) .input-group-text {
    border-color: var(--pf-border);
    color: var(--pf-ink);
    background-color: var(--pf-surface);
    border-radius: var(--pf-radius);
}

html:not([data-theme-mode="dark"]) .form-control,
html:not([data-theme-mode="dark"]) .form-select {
    min-height: 2.5rem;
    border-radius: var(--pf-radius);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

html:not([data-theme-mode="dark"]) .form-control:focus,
html:not([data-theme-mode="dark"]) .form-select:focus {
    border-color: var(--pf-primary);
    box-shadow: var(--pf-focus-ring);
}

html:not([data-theme-mode="dark"]) .form-control::placeholder {
    color: var(--pf-subtle);
    opacity: 1;
}

html:not([data-theme-mode="dark"]) .form-label,
html:not([data-theme-mode="dark"]) label:not(.btn) {
    color: var(--pf-text);
    font-weight: 600;
}

html:not([data-theme-mode="dark"]) .form-control.is-invalid,
html:not([data-theme-mode="dark"]) .form-select.is-invalid {
    border-color: var(--pf-danger);
}

.btn,
.button {
    border-radius: var(--pf-button-radius);
    box-shadow: none;
    font-weight: var(--pf-button-weight);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn-primary,
.button-primary {
    border-color: var(--pf-primary) !important;
    color: var(--pf-on-primary) !important;
    background-color: var(--pf-primary) !important;
    background-image: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.button-primary:hover,
.button-primary:focus {
    border-color: var(--pf-primary-hover) !important;
    color: var(--pf-on-primary) !important;
    background-color: var(--pf-primary-hover) !important;
}

.btn-primary:focus-visible,
.button-primary:focus-visible,
.btn-outline-primary:focus-visible {
    box-shadow: var(--pf-focus-ring) !important;
}

.btn-secondary,
.button-secondary {
    border-color: var(--pf-primary) !important;
    color: var(--pf-primary) !important;
    background: var(--pf-surface) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.button-secondary:hover,
.button-secondary:focus {
    border-color: var(--pf-primary-hover) !important;
    color: var(--pf-primary-hover) !important;
    background: var(--pf-primary-soft) !important;
}

.btn-accent,
.button-accent {
    border-color: var(--pf-accent) !important;
    color: var(--pf-ink) !important;
    background: var(--pf-accent) !important;
}

.btn-accent:hover,
.btn-accent:focus,
.button-accent:hover,
.button-accent:focus {
    border-color: var(--pf-accent-hover) !important;
    color: var(--pf-on-primary) !important;
    background: var(--pf-accent-hover) !important;
}

.btn-success { border-color: var(--pf-success) !important; background: var(--pf-success) !important; }
.btn-warning { border-color: var(--pf-warning) !important; color: var(--pf-ink) !important; background: var(--pf-warning) !important; }
.btn-danger { border-color: var(--pf-danger) !important; background: var(--pf-danger) !important; }

.btn-outline-primary {
    border-color: var(--pf-primary) !important;
    color: var(--pf-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--pf-on-primary) !important;
    background: var(--pf-primary) !important;
}

.btn-light,
.btn-outline-secondary {
    border-color: var(--pf-border) !important;
    color: var(--pf-text) !important;
    background: var(--pf-surface) !important;
}

.btn-light:hover,
.btn-outline-secondary:hover {
    border-color: var(--pf-border-strong) !important;
    color: var(--pf-ink) !important;
    background: var(--pf-primary-faint) !important;
}

.text-primary { color: var(--pf-primary) !important; }
.bg-primary { background-color: var(--pf-primary) !important; }
.border-primary { border-color: var(--pf-primary) !important; }
.bg-primary-transparent { color: var(--pf-primary) !important; background: var(--pf-primary-soft) !important; }
.pagination { --bs-pagination-active-bg: var(--pf-primary); --bs-pagination-active-border-color: var(--pf-primary); --bs-pagination-color: var(--pf-primary); --bs-pagination-border-color: var(--pf-border); --bs-pagination-border-radius: var(--pf-radius); }
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active { color: var(--pf-primary); border-color: var(--pf-primary); }

html:not([data-theme-mode="dark"]) .modal-content {
    overflow: hidden;
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-md);
}

html:not([data-theme-mode="dark"]) .modal-backdrop.show {
    opacity: .38;
}

html:not([data-theme-mode="dark"]) .dropdown-menu {
    padding: .4rem;
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-md);
}

html:not([data-theme-mode="dark"]) .dropdown-item {
    border-radius: var(--pf-radius-sm);
    color: var(--pf-text);
}

html:not([data-theme-mode="dark"]) .dropdown-item:hover,
html:not([data-theme-mode="dark"]) .dropdown-item:focus,
html:not([data-theme-mode="dark"]) .dropdown-item.active {
    color: var(--pf-primary-deep);
    background: var(--pf-primary-soft);
}

.nav-tabs {
    border-color: var(--pf-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    border-radius: var(--pf-radius-sm);
    color: var(--pf-muted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--pf-primary);
    background: var(--pf-primary-faint);
}

.nav-pills .nav-link.active {
    color: var(--pf-primary-deep);
    background: var(--pf-primary-soft);
}

.badge {
    border-radius: 999px;
    font-weight: 650;
}

.bg-success,
.badge.bg-success { background-color: var(--pf-success) !important; }
.bg-warning,
.badge.bg-warning { color: var(--pf-ink) !important; background-color: var(--pf-warning) !important; }
.bg-danger,
.badge.bg-danger { background-color: var(--pf-danger) !important; }
.bg-info,
.badge.bg-info { color: var(--pf-primary-deep) !important; background-color: var(--pf-primary-light) !important; }
.bg-success-transparent { color: #157652 !important; background: var(--pf-success-soft) !important; }
.bg-warning-transparent { color: #8a5a12 !important; background: var(--pf-warning-soft) !important; }
.bg-danger-transparent { color: #a23a37 !important; background: var(--pf-danger-soft) !important; }
.bg-info-transparent { color: var(--pf-primary-deep) !important; background: var(--pf-primary-pale) !important; }

.tooltip-inner {
    border-radius: var(--pf-radius-sm);
    color: var(--pf-on-dark);
    background: var(--pf-primary-deep);
    box-shadow: var(--pf-shadow-sm);
}

.popover {
    border-color: var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-md);
}

.alert-success { border-color: rgba(var(--pf-success-rgb), .24); color: #157652; background: var(--pf-success-soft); }
.alert-warning { border-color: rgba(var(--pf-warning-rgb), .3); color: #79500f; background: var(--pf-warning-soft); }
.alert-danger { border-color: rgba(var(--pf-danger-rgb), .24); color: #9d3633; background: var(--pf-danger-soft); }
.alert-info { border-color: rgba(var(--pf-primary-rgb), .22); color: var(--pf-primary-deep); background: var(--pf-primary-soft); }

:focus-visible {
    outline: 2px solid var(--pf-primary);
    outline-offset: 2px;
}

/* Organization workspace */
.pf-modern-sidebar {
    --pf-sidebar-bg: var(--pf-primary-deep);
    --pf-sidebar-border: rgba(255, 255, 255, .1);
    --pf-sidebar-text: var(--pf-on-dark-muted);
    --pf-sidebar-heading: var(--pf-on-dark-subtle);
    --pf-sidebar-strong: var(--pf-on-dark);
    --pf-sidebar-accent: var(--pf-primary-light);
    --pf-sidebar-accent-bg: var(--pf-primary);
    --pf-sidebar-hover-bg: rgba(255, 255, 255, .06);
}

.pf-modern-sidebar .pf-workspace-switcher {
    border-color: var(--pf-sidebar-border);
    background: rgba(255, 255, 255, .05);
}

.pf-modern-sidebar #nav-leftmenu .side-menu__item .side-menu__icon {
    color: var(--pf-sidebar-text) !important;
}

.pf-modern-sidebar .pf-sidebar-brand-name,
.pf-modern-sidebar .pf-workspace-name {
    color: var(--pf-on-dark);
}

.pf-modern-sidebar .pf-workspace-kicker,
.pf-modern-sidebar .pf-workspace-chevron,
.pf-modern-sidebar #nav-leftmenu .pf-nav-section-title {
    color: var(--pf-sidebar-heading);
}

.pf-modern-sidebar #nav-leftmenu .side-menu__item:hover,
.pf-modern-sidebar #nav-leftmenu .side-menu__item.active {
    color: var(--pf-on-dark) !important;
}

.pf-modern-sidebar #nav-leftmenu .side-menu__item.active .side-menu__icon,
.pf-modern-sidebar #nav-leftmenu .side-menu__item.active .side-menu__label {
    color: var(--pf-on-dark) !important;
}

/* Copilot */
.pf-copilot-shell {
    --copilot-ink: var(--pf-ink);
    --copilot-muted: var(--pf-muted);
    --copilot-line: var(--pf-border);
    --copilot-soft: var(--pf-primary-soft);
    --copilot-accent: var(--pf-primary);
    --copilot-accent-dark: var(--pf-primary-deep);
}

.pf-copilot-shell,
.pf-copilot-main,
.pf-copilot-messages,
.agent-visualization,
.pf-copilot-composer,
.pf-copilot-prompt,
.context-assistant-panel,
.context-prompt {
    background-color: var(--pf-surface);
}

.agent-bubble { color: var(--pf-text); background: var(--pf-primary-faint); }
.agent-msg.user .agent-bubble { color: #fff; background: var(--pf-primary); }
.pf-copilot-side { background: var(--pf-primary-soft); }

/* Authentication */
.auth-page {
    --auth-ink: var(--pf-ink);
    --auth-blue: var(--pf-primary);
    --auth-cyan: var(--pf-primary-light);
    --auth-muted: var(--pf-muted);
    --auth-line: var(--pf-border);
    --auth-paper: var(--pf-canvas);
}

.auth-page {
    background: linear-gradient(90deg, var(--pf-primary-deep) 0, var(--pf-primary-deep) 45%, var(--pf-canvas) 45%, var(--pf-canvas) 100%);
}

.auth-story { background: var(--pf-deep-gradient); }
.auth-back,
.auth-brand small,
.auth-panel-heading p,
.auth-terms { color: var(--pf-muted); }
.auth-panel-kicker,
.auth-panel a { color: var(--pf-primary); }
.auth-eyebrow,
.auth-benefits span { color: var(--pf-primary-light); }
.auth-eyebrow::before { background: currentColor; }
.auth-agent-card { border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.auth-agent-mark { color: var(--pf-primary-deep); background: var(--pf-accent); }
.auth-agent-tags span { color: var(--pf-primary-light); border-color: rgba(var(--pf-primary-rgb), .35); background: rgba(var(--pf-primary-rgb), .12); }
.auth-panel { border-color: var(--pf-border); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-md); }
.auth-field input { border-color: var(--pf-border); border-radius: var(--pf-radius); color: var(--pf-ink); background: var(--pf-surface); }
.auth-field input::placeholder { color: var(--pf-subtle); }
.auth-field input:focus { border-color: var(--pf-primary); box-shadow: var(--pf-focus-ring); }
.auth-submit { background: var(--pf-primary); box-shadow: var(--pf-shadow-sm); }
.auth-submit:hover { background: var(--pf-primary-hover); box-shadow: var(--pf-shadow-sm); }
.auth-panel .auth-submit-link,
.auth-panel .auth-submit-link:hover,
.auth-panel .auth-submit-link:focus-visible { color: #fff; }

/* Narrative landing */
body.landing-v2-page {
    --pf-primary: #267aba;
    --pf-primary-rgb: 38, 122, 186;
    --pf-primary-hover: #003c73;
    --pf-primary-deep: #003c73;
    --pf-primary-deep-rgb: 0, 60, 115;
    --pf-primary-light: #62b9f2;
    --pf-primary-pale: #d8efff;
    --pf-primary-soft: #eef7ff;
    --pf-primary-faint: #f4f7fa;
    --pf-ink: #163b5c;
    --pf-ink-rgb: 22, 59, 92;
    --pf-on-dark-muted: #d8efff;
    --pf-deep-gradient: linear-gradient(145deg, #163b5c, #003c73);
    --pf-landing-section-canvas: #f4f7fa;
    --pf-landing-section-surface: #ffffff;
    --pf-landing-section-accent: #eef7ff;
    --pf-landing-section-divider: rgba(0, 60, 115, .09);
}

.hero-shell { background: var(--pf-deep-gradient); }
body.landing-v2-page .hero-shell {
    background-color: var(--pf-primary-deep);
    background-image:
        linear-gradient(180deg, rgba(var(--pf-primary-deep-rgb), .12), rgba(var(--pf-primary-deep-rgb), .72)),
        linear-gradient(90deg, var(--pf-primary-deep) 0%, rgba(var(--pf-primary-deep-rgb), .97) 36%, rgba(var(--pf-primary-deep-rgb), .66) 72%, rgba(var(--pf-primary-deep-rgb), .78) 100%),
        url('../img/plannflow-mountain-river-banner.jpg');
    background-position: center, center, 64% center;
    background-repeat: no-repeat;
    background-size: cover, cover, cover;
}
.nav-shell { background: var(--pf-primary-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.landing-v2-page .nav-shell {
    border-bottom-color: rgba(98, 185, 242, .24);
    background: var(--pf-primary-deep);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.landing-v2-page .nav-shell.is-scrolled {
    border-bottom-color: rgba(98, 185, 242, .52);
    box-shadow: 0 8px 24px rgba(0, 38, 74, .2);
}
.eyebrow,
.overline,
.hero h1 em,
.section-kicker.light,
.layer-section h2 em,
.persona-section h2 em,
.contact-section h2 em,
.hero-proof b,
.layer-arrow,
.sprint-card h2 em,
.sprint-card li span { color: var(--pf-primary-light); }
.decision-card { color: var(--pf-ink); background: var(--pf-surface); box-shadow: var(--pf-shadow-md); transform: none; }
.live-pill { color: var(--pf-primary-deep); background: var(--pf-primary-soft); }
.live-pill i { background: var(--pf-accent); }
.scenario-tabs .active,
.scenario-tabs button.active,
.decision-footer button { background: var(--pf-primary); }
.bar-phoenix,
.capacity-after i { background: var(--pf-primary); }
.bar-atlas,
.timeline-row .bar { background: var(--pf-primary-light); }
.bar-nova { background: var(--pf-primary-pale); }
.problem-section,
.usecase-section,
.quickstart-section,
.flow-section,
.forecast-section { background: var(--pf-primary-soft); }
.problem-grid article { background: var(--pf-primary-soft); }
.method-section,
.governance-section,
.faq-section,
.clarity-section { background: var(--pf-primary-faint); }
.layer-section,
.persona-section { background: var(--pf-primary-deep); }
.layer-card.core { color: #fff; background: var(--pf-primary); }
.layer-card.core span,
.layer-card.core small { color: rgba(255,255,255,.72); }
.ai-section { background: var(--pf-primary-pale); }
.ai-copy h2 em { color: var(--pf-primary); }
.ai-copy blockquote { border-color: var(--pf-primary); }
.trust-line span,
.governance-grid .human { background: var(--pf-primary-deep); }
.sprint-card { background: var(--pf-deep-gradient); }
.contact-section { background: var(--pf-primary-deep); }
.form-success > span { color: #fff; background: var(--pf-primary); }
footer { background: var(--pf-primary-deep); }

/* Landing V2 contrast hierarchy.
   These selectors intentionally outrank the light application-shell defaults
   for headings, labels and placeholders placed on dark marketing surfaces. */
html:not([data-theme-mode="dark"]) body.landing-v2-page .hero-shell h1,
html:not([data-theme-mode="dark"]) body.landing-v2-page .layer-section h2,
html:not([data-theme-mode="dark"]) body.landing-v2-page .layer-section h3,
html:not([data-theme-mode="dark"]) body.landing-v2-page .persona-section h2,
html:not([data-theme-mode="dark"]) body.landing-v2-page .persona-section h3,
html:not([data-theme-mode="dark"]) body.landing-v2-page .sprint-card h2,
html:not([data-theme-mode="dark"]) body.landing-v2-page .sprint-card h3,
html:not([data-theme-mode="dark"]) body.landing-v2-page .governance-grid .human h3,
html:not([data-theme-mode="dark"]) body.landing-v2-page .current-forecast-card strong,
html:not([data-theme-mode="dark"]) body.landing-v2-page .sop-usecase h3,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section h2,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section h3 {
    color: var(--pf-on-dark);
}

body.landing-v2-page .nav-links,
body.landing-v2-page .nav-login,
body.landing-v2-page .nav-register,
body.landing-v2-page .nav-console,
body.landing-v2-page .plannflow-maker,
body.landing-v2-page .hero-lead,
body.landing-v2-page .hero-note,
body.landing-v2-page .hero-note strong,
body.landing-v2-page .hero-proof span,
body.landing-v2-page .layer-card span,
body.landing-v2-page .layer-card small,
body.landing-v2-page .persona-intro,
body.landing-v2-page .persona-list p,
body.landing-v2-page .governance-grid .human p,
body.landing-v2-page .sprint-card > div > p:not(.section-kicker),
body.landing-v2-page .sop-copy p,
body.landing-v2-page .sop-usecase > small,
body.landing-v2-page .current-forecast-card .forecast-tag,
body.landing-v2-page .current-forecast-card p,
body.landing-v2-page .current-forecast-card small,
body.landing-v2-page .contact-section > div > div > p:not(.section-kicker),
body.landing-v2-page .form-success p,
body.landing-v2-page footer {
    color: var(--pf-on-dark-muted);
}

body.landing-v2-page .section-kicker.light,
body.landing-v2-page .eyebrow,
body.landing-v2-page .overline {
    color: var(--pf-on-dark-muted);
}

html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section label:not(.btn),
body.landing-v2-page .contact-section form small,
body.landing-v2-page #contact-status {
    color: var(--pf-on-dark-muted);
}

html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section .form-control,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section input,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section textarea {
    color: var(--pf-on-dark);
    border-color: rgba(243, 248, 251, .42);
    background: transparent;
}

html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section .form-control::placeholder,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section input::placeholder,
html:not([data-theme-mode="dark"]) body.landing-v2-page .contact-section textarea::placeholder {
    color: var(--pf-on-dark-muted);
    opacity: 1;
}

body.landing-v2-page .decision-topline .overline,
body.landing-v2-page .scenario-tabs span,
body.landing-v2-page .scenario-tabs button,
body.landing-v2-page .timeline-head,
body.landing-v2-page .insight-grid span,
body.landing-v2-page .decision-footer span,
body.landing-v2-page .forecast-tag {
    color: var(--pf-muted);
}

body.landing-v2-page .contact-section form small,
body.landing-v2-page footer p,
body.landing-v2-page footer > div > span {
    font-size: 10px;
    line-height: 1.55;
}

body.landing-v2-page #contact-status.is-success { color: #8be8d6; }
body.landing-v2-page #contact-status.is-error { color: #ffd1cc; }

@media (max-width: 920px) {
    body.landing-v2-page .hero-shell {
        background-image:
            linear-gradient(180deg, rgba(var(--pf-primary-deep-rgb), .2), rgba(var(--pf-primary-deep-rgb), .9)),
            linear-gradient(90deg, rgba(var(--pf-primary-deep-rgb), .96), rgba(var(--pf-primary-deep-rgb), .68)),
            url('../img/plannflow-mountain-river-banner.jpg');
        background-position: center, center, 64% center;
        background-size: cover, cover, cover;
    }
}

.button:hover { transform: translateY(-1px); }

.section-kicker,
.section h2 em,
.clarity-section h2 em,
.problem-grid span,
.usecase-grid span,
.governance-grid span,
.method-list span,
.quickstart-steps article > span,
.clarity-grid article > span,
.forecast-link,
.forecast-cycle i { color: var(--pf-primary); }

.timeline-row b,
.insight-grid div,
.lightweight-note,
.terminology-note { color: var(--pf-primary-deep); background: var(--pf-primary-soft); }
.timeline-row b { color: var(--pf-primary); }
.quickstart-steps article,
.simple-flow,
.flow-stop,
.clarity-grid article,
.forecast-card { border-color: var(--pf-border); background-color: var(--pf-surface); }
.quickstart-steps article,
.simple-flow,
.forecast-card { box-shadow: var(--pf-shadow-sm); }
.lightweight-note,
.terminology-note { border-left-color: var(--pf-primary); }

.flow-water { background: linear-gradient(90deg, var(--pf-primary-pale), var(--pf-primary), var(--pf-primary-pale)); }
.flow-water i,
.tools-big-icon b,
.import-big-icon b,
.big-flow-arrow,
.roadmap-big-icon i,
.flow-caption b,
.forecast-promotion { background-color: var(--pf-primary); }
.big-flow-arrow,
.import-big-icon b { color: var(--pf-primary); background-color: transparent; }
.tools-big-icon b:nth-child(2),
.tools-big-icon b:nth-child(3),
.core-stop,
.current-forecast-card { border-color: var(--pf-primary-deep); background: var(--pf-deep-gradient); }
.big-flow-icon { color: var(--pf-primary-deep); background: var(--pf-primary-soft); box-shadow: 0 0 0 10px rgba(var(--pf-primary-rgb), .06); }
.ai-star { color: var(--pf-primary-deep); background: var(--pf-accent); box-shadow: 0 0 0 5px var(--pf-primary-deep); }
.flow-tags span { color: var(--pf-primary-deep); background: var(--pf-primary-pale); }
.scenario-forecast-card::before,
.forecast-promotion { background: var(--pf-primary); }

.decision-verdict,
.copilot-prompt { border-left-color: var(--pf-primary); background: linear-gradient(90deg, var(--pf-primary-soft), var(--pf-primary-faint)); }
.decision-verdict strong,
.copilot-prompt p { color: var(--pf-primary-deep); }
.decision-verdict small,
.impact-row b,
.decision-metrics strong,
.planning-summary strong { color: var(--pf-primary); }
.decision-metrics,
.planning-summary { border-color: var(--pf-border); background: var(--pf-border); }
.decision-metrics > div,
.planning-summary > div { background: var(--pf-primary-faint); }
.capacity-meter { background: var(--pf-primary-pale); }
.agent-response-label > span,
.copilot-prompt > span i { color: #fff; background: var(--pf-primary); }
.gantt-bar,
.budget-meter i,
.example-meta i,
.problem-grid .copilot-example h3,
.example-answer::before,
.example-chart-row i { background: var(--pf-primary); }
.gantt-milestone,
.example-result strong,
.recommendation-outcomes strong { color: var(--pf-primary-deep); }
.recommendation-panel { border-color: var(--pf-primary-light); border-left-color: var(--pf-primary); background: linear-gradient(105deg, var(--pf-primary-soft), var(--pf-primary-faint)); }
.pressure-row:not(.critical):not(.watch):not(.stable) i { background: var(--pf-primary); }

/* Domain landing */
.domain-nav-shell { background: var(--pf-primary-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
.domain-hero { background: var(--pf-deep-gradient); }
.domain-hero .eyebrow,
.domain-hero h1 em,
.domain-selector b,
.domain-selector i,
.case-number,
.decision-flow span,
.contact-copy h2 em { color: var(--pf-primary-light); }
.use-cases { background: var(--pf-primary-soft); }
.domain-case { border-color: var(--pf-border-translucent); }
.case-context,
.decision-section { background: var(--pf-primary-deep); }
.prompt { border-left-color: var(--pf-primary); background: var(--pf-primary-soft); }
.source-tags span { border-color: var(--pf-border); color: var(--pf-text); background: var(--pf-primary-faint); }
.connections { background: var(--pf-surface); }
.connection-note { background: var(--pf-primary-soft); }
.trust { background: var(--pf-canvas); }
.trust-grid article { background: var(--pf-canvas); }
.contact { background: var(--pf-deep-gradient); }
.contact input:focus,
.contact textarea:focus { border-color: var(--pf-primary); outline-color: rgba(var(--pf-primary-rgb), .2); }

/* Landing V1 carousel color fidelity on the light examples section. */
body.landing-v2-page .problem-section { background: #f4f7fa; }
body.landing-v2-page .problem-grid .example-meta { background: #f4f7fa; }
body.landing-v2-page .problem-grid .copilot-example h3 {
    background: var(--pf-ink);
    box-shadow: 0 7px 18px rgba(var(--pf-ink-rgb), .18);
}
body.landing-v2-page .example-carousel-dot.is-active { background: var(--pf-primary-deep); }

/* Landing V2 section rhythm: grouped surfaces replace near-identical alternating tints. */
body.landing-v2-page .clarity-section,
body.landing-v2-page .forecast-section {
    background: var(--pf-landing-section-canvas);
}

body.landing-v2-page .integrations-section,
body.landing-v2-page .governance-section {
    background: var(--pf-landing-section-surface);
}

body.landing-v2-page .faq-section {
    background: var(--pf-landing-section-accent);
}

body.landing-v2-page .forecast-section,
body.landing-v2-page .governance-section {
    border-top: 1px solid var(--pf-landing-section-divider);
}

/* Landing V1 carousel color fidelity on the light examples section. */
body.landing-v2-page .problem-section { background: #f4f7fa; }
body.landing-v2-page .problem-grid .example-meta { background: #f4f7fa; }
body.landing-v2-page .problem-grid .copilot-example h3 {
    background: var(--pf-ink);
    box-shadow: 0 7px 18px rgba(var(--pf-ink-rgb), .18);
}
body.landing-v2-page .example-carousel-dot.is-active { background: var(--pf-primary-deep); }