/*
 * Shared staff palette mirrored for the independently hosted Family Portal
 *
 * Recolor the site from the small set of literal "Main theme controls" below.
 * The purpose-named tokens retain useful semantic labels, but their values are
 * mixed from those controls so a theme change flows through the whole site.
 */

:root, [data-company-theme] {
    /* Main theme controls: the site's intentionally independent colors. */
    --color-brand-primary: #344654; /* Neutral shell; authorized organization overrides inline. */
    --color-brand-secondary: #e7edf2; /* Neutral shell; authorized organization overrides inline. */
    --color-page-background: #f4f4f9; /* Default page background. */
    --color-surface: #fff; /* Cards, forms, tables, and raised surfaces. */
    --color-text-primary: #333; /* Default readable text. */
    --color-text-black: #000; /* Maximum-contrast text and shadow source. */
    --color-border-default: #ccc; /* Default input and panel border. */
    --color-cancel: #707070; /* Cancel and dismiss controls. */
    --color-danger: #a30000; /* Critical errors and destructive accents. */
    --color-danger-button: #e74c3c; /* Brighter destructive action. */
    --color-warning: #d59000; /* Warnings and attention states. */
    --color-success: #1b7d1b; /* Successful and active status text. */
    --color-success-action: #4caf50; /* Brighter success/submit action. */
    --color-info: #2d6d9f; /* Informational notices and muted blue text. */
    --color-action-blue: #0d6efd; /* Strong blue action and focus source. */
    --color-text-on-accent: var(--color-surface); /* Text/icons on strong colors. */
    --color-brand-primary-contrast: var(--color-text-black); /* Organization resolver overrides for dark primary colors. */

    /* Brand and primary-action variants */
    --color-brand-primary-text: color-mix(in srgb, var(--color-brand-primary) 23%, var(--color-text-black));
    --color-brand-primary-text-deep: color-mix(in srgb, var(--color-brand-primary) 15%, var(--color-text-black));
    --color-brand-primary-border: color-mix(in srgb, var(--color-brand-primary) 83%, var(--color-text-black));
    --color-brand-primary-strong: color-mix(in srgb, var(--color-brand-primary) 56%, var(--color-text-black));
    --color-brand-primary-strong-text: color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-text-black));
    --color-brand-primary-deep-text: color-mix(in srgb, var(--color-brand-primary) 41%, var(--color-text-black));
    --color-brand-primary-muted-text: color-mix(in srgb, var(--color-brand-primary) 63%, var(--color-text-black));
    --color-brand-primary-active-dot: color-mix(in srgb, var(--color-brand-primary) 69%, var(--color-text-black));
    --color-brand-primary-option-hover: color-mix(in srgb, var(--color-brand-primary) 79%, var(--color-text-primary));
    --color-brand-primary-option-selected: color-mix(in srgb, var(--color-brand-primary) 69%, var(--color-text-primary));
    --color-brand-primary-add-border: color-mix(in srgb, var(--color-brand-primary) 75%, var(--color-text-primary));
    --color-brand-primary-toast-border: color-mix(in srgb, var(--color-brand-primary) 72%, var(--color-text-primary));
    --color-brand-primary-toast-background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface));
    --color-brand-primary-toast-text: color-mix(in srgb, var(--color-brand-primary) 25%, var(--color-text-black));
    --color-brand-primary-disabled: color-mix(in srgb, var(--color-brand-primary) 40%, var(--color-surface));
    --color-brand-primary-section-border: color-mix(in srgb, var(--color-brand-primary) 35%, var(--color-surface));
    --color-brand-primary-table-border: color-mix(in srgb, var(--color-brand-primary) 27%, var(--color-surface));
    --color-brand-primary-table-header: color-mix(in srgb, var(--color-brand-primary) 19%, var(--color-surface));
    --color-brand-primary-selected: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface));
    --color-brand-primary-soft: color-mix(in srgb, var(--color-brand-primary) 9%, var(--color-surface));
    --color-brand-primary-option-background: color-mix(in srgb, var(--color-brand-primary) 7%, var(--color-surface));
    --color-brand-primary-card-background: color-mix(in srgb, var(--color-brand-primary) 5%, var(--color-surface));
    --color-brand-primary-panel-background: color-mix(in srgb, var(--color-brand-primary) 4%, var(--color-surface));
    --color-brand-primary-export-background: color-mix(in srgb, var(--color-brand-primary) 5%, var(--color-surface));
    --color-brand-primary-export-border: color-mix(in srgb, var(--color-brand-primary) 13%, var(--color-border-default));
    --color-brand-primary-selection-background: color-mix(in srgb, var(--color-brand-primary) 22%, var(--color-surface));
    --color-brand-primary-success-text: color-mix(in srgb, var(--color-brand-primary) 33%, var(--color-text-black));
    --color-brand-primary-editing-background: color-mix(in srgb, var(--color-brand-primary) 15%, var(--color-surface));
    --color-brand-primary-program-background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface));
    --color-brand-primary-status-border: color-mix(in srgb, var(--color-brand-primary) 45%, var(--color-surface));

    /* Secondary action variants */
    --color-brand-secondary-text: color-mix(in srgb, var(--color-brand-secondary) 65%, var(--color-text-primary));
    --color-brand-secondary-text-strong: color-mix(in srgb, var(--color-brand-secondary) 61%, var(--color-text-black));
    --color-brand-secondary-soft: color-mix(in srgb, var(--color-brand-secondary) 4%, var(--color-surface));
    --color-brand-secondary-note-background: color-mix(in srgb, var(--color-brand-secondary) 3%, var(--color-surface));
    --color-brand-secondary-badge-background: color-mix(in srgb, var(--color-brand-secondary) 14%, var(--color-surface));
    --color-brand-secondary-border-soft: color-mix(in srgb, var(--color-brand-secondary) 35%, transparent);
    --color-brand-secondary-hover-shadow: color-mix(in srgb, var(--color-brand-secondary-text-strong) 25%, transparent);

    /* Text hierarchy */
    --color-text-heading: color-mix(in srgb, var(--color-text-primary) 67%, var(--color-text-black));
    --color-text-heading-strong: color-mix(in srgb, var(--color-text-primary) 33%, var(--color-text-black));
    --color-text-report-heading: color-mix(in srgb, var(--color-text-primary) 60%, var(--color-text-black));
    --color-text-program-heading: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-info));
    --color-text-history-heading: color-mix(in srgb, var(--color-text-primary) 70%, var(--color-info));
    --color-text-secondary: color-mix(in srgb, var(--color-text-primary) 92%, var(--color-surface));
    --color-text-secondary-medium: color-mix(in srgb, var(--color-text-primary) 84%, var(--color-surface));
    --color-text-muted: color-mix(in srgb, var(--color-text-primary) 75%, var(--color-surface));
    --color-text-subtle: color-mix(in srgb, var(--color-text-primary) 67%, var(--color-surface));
    --color-text-help: color-mix(in srgb, var(--color-text-primary) 58%, var(--color-surface));
    --color-text-gray: color-mix(in srgb, var(--color-text-primary) 63%, var(--color-surface));
    --color-text-placeholder: color-mix(in srgb, var(--color-text-primary) 42%, var(--color-surface));
    --color-text-cancel-control: color-mix(in srgb, var(--color-cancel) 80%, var(--color-info));
    --color-text-preschool-intro: color-mix(in srgb, var(--color-cancel) 88%, var(--color-info));
    --color-text-preschool-help: color-mix(in srgb, var(--color-cancel) 90%, var(--color-info));
    --color-text-preschool-item: color-mix(in srgb, var(--color-cancel) 91%, var(--color-info));
    --color-text-preschool-empty: color-mix(in srgb, var(--color-cancel) 92%, var(--color-info));
    --color-text-program-muted: color-mix(in srgb, var(--color-cancel) 82%, var(--color-info));
    --color-text-program-secondary: color-mix(in srgb, var(--color-cancel) 74%, var(--color-info));
    --color-text-program-note: color-mix(in srgb, var(--color-text-primary) 85%, var(--color-info));
    --color-text-report-muted: color-mix(in srgb, var(--color-cancel) 88%, var(--color-info));

    /* Neutral surfaces and controls */
    --color-dark-action-background: var(--color-text-primary);
    --color-page-background-checkout: color-mix(in srgb, var(--color-page-background) 60%, var(--color-surface));
    --color-page-background-login: color-mix(in srgb, var(--color-page-background) 74%, var(--color-border-default));
    --color-surface-near-white: color-mix(in srgb, var(--color-surface) 97%, var(--color-text-primary));
    --color-surface-muted: color-mix(in srgb, var(--color-surface) 96%, var(--color-text-primary));
    --color-surface-hover-translucent: color-mix(in srgb, var(--color-surface-muted) 80%, transparent);
    --color-control-background-light: color-mix(in srgb, var(--color-surface) 96%, var(--color-text-primary));
    --color-control-background: color-mix(in srgb, var(--color-surface) 95%, var(--color-text-primary));
    --color-control-background-soft: color-mix(in srgb, var(--color-surface) 94%, var(--color-text-primary));
    --color-control-background-striped: color-mix(in srgb, var(--color-surface) 93%, var(--color-text-primary));
    --color-control-background-disabled: color-mix(in srgb, var(--color-page-background) 72%, var(--color-surface));
    --color-inset-background: color-mix(in srgb, var(--color-surface) 96%, var(--color-text-primary));
    --color-program-soft-background: color-mix(in srgb, var(--color-page-background) 72%, var(--color-surface));
    --color-history-table-header: color-mix(in srgb, var(--color-page-background) 74%, var(--color-border-default));
    --color-table-header-background: color-mix(in srgb, var(--color-page-background) 70%, var(--color-surface));
    --color-table-row-hover: color-mix(in srgb, var(--color-info) 2%, var(--color-surface));
    --color-table-row-alternate: color-mix(in srgb, var(--color-surface) 93%, var(--color-text-primary));
    --color-table-row-hover-medium: color-mix(in srgb, var(--color-surface) 92%, var(--color-text-primary));
    --color-control-active: color-mix(in srgb, var(--color-border-default) 75%, var(--color-surface));
    --color-border-subtle: color-mix(in srgb, var(--color-border-default) 67%, var(--color-surface));
    --color-border-light: color-mix(in srgb, var(--color-border-default) 33%, var(--color-surface));
    --color-border-muted: color-mix(in srgb, var(--color-border-default) 50%, var(--color-surface));
    --color-border-report: color-mix(in srgb, var(--color-border-default) 47%, var(--color-page-background));
    --color-border-program: color-mix(in srgb, var(--color-border-default) 70%, var(--color-page-background));
    --color-border-preschool: color-mix(in srgb, var(--color-border-default) 63%, var(--color-page-background));
    --color-border-preschool-control: color-mix(in srgb, var(--color-border-default) 85%, var(--color-info));
    --color-border-preschool-option: color-mix(in srgb, var(--color-border-default) 72%, var(--color-page-background));
    --color-border-coupon: color-mix(in srgb, var(--color-border-default) 79%, var(--color-surface));
    --color-border-dropdown: color-mix(in srgb, var(--color-border-default) 76%, var(--color-info));
    --color-border-dropdown-row: color-mix(in srgb, var(--color-border-default) 50%, var(--color-page-background));
    --color-border-select: color-mix(in srgb, var(--color-border-default) 73%, var(--color-info));
    --color-border-empty-state: color-mix(in srgb, var(--color-border-default) 80%, var(--color-info));
    --color-status-dot-idle: color-mix(in srgb, var(--color-cancel) 69%, var(--color-border-default));
    --color-legacy-nav-background: color-mix(in srgb, var(--color-cancel) 88%, var(--color-surface));
    --color-focus-neutral-blue-background: color-mix(in srgb, var(--color-action-blue) 10%, var(--color-surface));
    --color-focus-neutral-blue-border: color-mix(in srgb, var(--color-action-blue) 55%, var(--color-surface));

    /* Danger, error, and destructive-action colors */
    --color-danger-reservation: color-mix(in srgb, var(--color-danger) 90%, var(--color-brand-secondary));
    --color-danger-adjustment-accent: color-mix(in srgb, var(--color-danger-button) 72%, var(--color-danger));
    --color-danger-confirm: color-mix(in srgb, var(--color-danger-button) 88%, var(--color-surface));
    --color-danger-mismatch-text: color-mix(in srgb, var(--color-danger-button) 78%, var(--color-danger));
    --color-danger-form-text: color-mix(in srgb, var(--color-danger-button) 55%, var(--color-danger));
    --color-danger-required: color-mix(in srgb, var(--color-danger-button) 90%, var(--color-surface));
    --color-danger-history-button: color-mix(in srgb, var(--color-danger) 85%, var(--color-danger-button));
    --color-danger-program-text: color-mix(in srgb, var(--color-danger) 80%, var(--color-brand-secondary));
    --color-danger-preschool-text: color-mix(in srgb, var(--color-danger) 88%, var(--color-danger-button));
    --color-danger-preschool-border: color-mix(in srgb, var(--color-danger-button) 63%, var(--color-surface));
    --color-danger-option-border: color-mix(in srgb, var(--color-brand-secondary) 31%, var(--color-surface));
    --color-danger-option-border-hover: color-mix(in srgb, var(--color-brand-secondary) 59%, var(--color-surface));
    --color-danger-option-border-selected: color-mix(in srgb, var(--color-brand-secondary) 70%, var(--color-surface));
    --color-danger-alert-text: color-mix(in srgb, var(--color-danger) 63%, var(--color-text-primary));
    --color-danger-alert-background: color-mix(in srgb, var(--color-danger-button) 22%, var(--color-surface));
    --color-danger-alert-border: color-mix(in srgb, var(--color-danger-button) 30%, var(--color-surface));
    --color-danger-toast-text: color-mix(in srgb, var(--color-danger) 70%, var(--color-text-black));
    --color-danger-toast-background: color-mix(in srgb, var(--color-danger-button) 6%, var(--color-surface));
    --color-danger-auth-text: color-mix(in srgb, var(--color-danger) 68%, var(--color-text-primary));
    --color-danger-auth-background: color-mix(in srgb, var(--color-danger-button) 4%, var(--color-surface));
    --color-danger-auth-border: color-mix(in srgb, var(--color-danger-button) 43%, var(--color-surface));
    --color-danger-auth-accent: color-mix(in srgb, var(--color-danger-button) 70%, var(--color-danger));
    --color-danger-message-text: color-mix(in srgb, var(--color-danger) 78%, var(--color-text-primary));
    --color-danger-message-background: color-mix(in srgb, var(--color-danger-button) 14%, var(--color-surface));
    --color-danger-status-text: color-mix(in srgb, var(--color-danger) 84%, var(--color-danger-button));
    --color-danger-status-background: color-mix(in srgb, var(--color-danger-button) 15%, var(--color-surface));
    --color-danger-status-border: color-mix(in srgb, var(--color-danger-button) 34%, var(--color-surface));
    --color-danger-inactive-background: color-mix(in srgb, var(--color-danger-button) 5%, var(--color-surface));
    --color-danger-inactive-border: color-mix(in srgb, var(--color-danger-button) 29%, var(--color-surface));
    --color-danger-sibling-title: color-mix(in srgb, var(--color-danger) 80%, var(--color-danger-button));
    --color-danger-sibling-background: color-mix(in srgb, var(--color-danger-button) 4%, var(--color-surface));
    --color-danger-sibling-border: color-mix(in srgb, var(--color-danger-button) 32%, var(--color-surface));
    --color-danger-option-background: color-mix(in srgb, var(--color-brand-secondary) 4%, var(--color-surface));
    --color-danger-option-background-soft: color-mix(in srgb, var(--color-brand-secondary) 3%, var(--color-surface));
    --color-danger-charge-background: color-mix(in srgb, var(--color-danger-button) 12%, var(--color-surface));
    --color-danger-adjustment-background: color-mix(in srgb, var(--color-danger-button) 11%, var(--color-surface));
    --color-danger-adjustment-hover: color-mix(in srgb, var(--color-danger-button) 22%, var(--color-surface));
    --color-danger-status-cell: color-mix(in srgb, var(--color-danger-button) 25%, var(--color-surface));
    --color-danger-mismatch-background: color-mix(in srgb, var(--color-danger-button) 8%, transparent);
    --color-danger-focus-ring: color-mix(in srgb, var(--color-danger-reservation) 35%, transparent);
    --color-alert-text: var(--color-danger-button);

    /* Success and active-state colors */
    --color-success-alert-text: color-mix(in srgb, var(--color-success) 74%, var(--color-text-primary));
    --color-success-alert-background: color-mix(in srgb, var(--color-success-action) 22%, var(--color-surface));
    --color-success-alert-border: color-mix(in srgb, var(--color-success-action) 30%, var(--color-surface));
    --color-success-payment-background: color-mix(in srgb, var(--color-success-action) 12%, var(--color-surface));
    --color-success-positive-background: color-mix(in srgb, var(--color-success-action) 11%, var(--color-surface));
    --color-success-active-background: color-mix(in srgb, var(--color-success-action) 10%, var(--color-surface));
    --color-success-active-border: color-mix(in srgb, var(--color-success-action) 35%, var(--color-surface));
    --color-success-reservation-cell: color-mix(in srgb, var(--color-success-action) 25%, var(--color-surface));
    --color-success-referrer-focus: color-mix(in srgb, var(--color-success-action) 8%, var(--color-surface));
    --color-success-funded-text: color-mix(in srgb, var(--color-success) 88%, var(--color-success-action));
    --color-success-room-text: color-mix(in srgb, var(--color-success) 82%, var(--color-brand-primary));
    --color-success-focus-ring: color-mix(in srgb, var(--color-success-action) 18%, transparent);
    --color-success-text-legacy: var(--color-success);

    /* Warning and attention colors */
    --color-warning-selection: color-mix(in srgb, var(--color-warning) 83%, var(--color-brand-primary));
    --color-warning-selection-background: color-mix(in srgb, var(--color-warning) 38%, var(--color-surface));
    --color-warning-row-background: color-mix(in srgb, var(--color-warning) 21%, var(--color-surface));
    --color-warning-row-hover: color-mix(in srgb, var(--color-warning) 38%, var(--color-surface));
    --color-warning-status-cell: color-mix(in srgb, var(--color-warning) 28%, var(--color-surface));
    --color-warning-adjustment-background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
    --color-warning-notice-background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    --color-warning-notice-border: color-mix(in srgb, var(--color-warning) 56%, var(--color-surface));
    --color-warning-notice-text: color-mix(in srgb, var(--color-warning) 56%, var(--color-text-black));

    /* Information, links, and focus colors */
    --color-info-text: color-mix(in srgb, var(--color-info) 72%, var(--color-text-black));
    --color-info-background: color-mix(in srgb, var(--color-info) 6%, var(--color-surface));
    --color-link: color-mix(in srgb, var(--color-info) 55%, var(--color-action-blue));
    --color-focus-blue: color-mix(in srgb, var(--color-action-blue) 92%, var(--color-info));
    --color-focus-blue-hover: color-mix(in srgb, var(--color-action-blue) 64%, var(--color-text-black));
    --color-focus-ring: color-mix(in srgb, var(--color-info) 83%, var(--color-text-black));
    --color-focus-ring-bright: color-mix(in srgb, var(--color-action-blue) 87%, var(--color-surface));
    --color-focus-shadow: color-mix(in srgb, var(--color-link) 15%, transparent);
    --color-focus-shadow-bright: color-mix(in srgb, var(--color-action-blue) 30%, transparent);
    --color-primary-button-shadow: color-mix(in srgb, var(--color-action-blue) 25%, transparent);
    --color-primary-button-shadow-hover: color-mix(in srgb, var(--color-action-blue) 35%, transparent);
    --color-primary-button-shadow-active: color-mix(in srgb, var(--color-action-blue) 20%, transparent);
    --color-primary-button-disabled: color-mix(in srgb, var(--color-action-blue) 24%, var(--color-surface));
    --color-legacy-nav-link: color-mix(in srgb, var(--color-info) 44%, var(--color-surface));

    /* Shadows, overlays, and translucent interaction colors */
    --color-transparent: transparent;
    --color-current: currentColor;
    --color-shadow-faintest: color-mix(in srgb, var(--color-text-black) 2.5%, transparent);
    --color-shadow-faint: color-mix(in srgb, var(--color-text-black) 3%, transparent);
    --color-shadow-extra-soft: color-mix(in srgb, var(--color-text-black) 5%, transparent);
    --color-shadow-soft: color-mix(in srgb, var(--color-text-black) 6%, transparent);
    --color-shadow-light: color-mix(in srgb, var(--color-text-black) 8%, transparent);
    --color-shadow-default: color-mix(in srgb, var(--color-text-black) 10%, transparent);
    --color-shadow-medium-light: color-mix(in srgb, var(--color-text-black) 12%, transparent);
    --color-shadow-medium: color-mix(in srgb, var(--color-text-black) 20%, transparent);
    --color-shadow-toast: color-mix(in srgb, var(--color-text-black) 22%, transparent);
    --color-shadow-modal-soft: color-mix(in srgb, var(--color-text-black) 25%, transparent);
    --color-shadow-modal: color-mix(in srgb, var(--color-text-black) 30%, transparent);
    --color-shadow-modal-strong: color-mix(in srgb, var(--color-text-black) 35%, transparent);
    --color-overlay-light: color-mix(in srgb, var(--color-text-black) 45%, transparent);
    --color-overlay: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
    --color-overlay-family: color-mix(in srgb, var(--color-text-primary) 55%, transparent);
    --color-overlay-reservation: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
    --color-brand-primary-shadow-soft: color-mix(in srgb, var(--color-brand-primary-text) 18%, transparent);
    --color-brand-primary-shadow: color-mix(in srgb, var(--color-brand-primary-text) 28%, transparent);
    --color-brand-primary-shadow-hover: color-mix(in srgb, var(--color-brand-primary-text) 34%, transparent);
    --color-brand-primary-shadow-hover-soft: color-mix(in srgb, var(--color-brand-primary-strong-text) 24%, transparent);
    --color-brand-primary-selection-shadow: color-mix(in srgb, var(--color-brand-primary-strong-text) 18%, transparent);
    --color-brand-primary-divider: color-mix(in srgb, var(--color-brand-primary-strong-text) 35%, transparent);
    --color-brand-primary-edit-shadow: color-mix(in srgb, var(--color-brand-primary-deep-text) 12%, transparent);
    --color-brand-primary-focus-soft: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
    --color-brand-primary-focus: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    --color-brand-primary-focus-medium: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
    --color-brand-primary-focus-strong: color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
    --color-brand-primary-roster-focus: color-mix(in srgb, var(--color-brand-primary) 65%, transparent);
    --color-brand-primary-panel-border: color-mix(in srgb, var(--color-brand-primary-muted-text) 45%, transparent);
    --color-dropdown-shadow: color-mix(in srgb, var(--color-text-program-heading) 12%, transparent);
}