/* Transparenta controlled-colour production layer (#303).
 *
 * Loaded after the existing Tailwind/Phase-1/layout styles. This file is the
 * runtime colour contract corresponding to docs/design/TRANSPARENTA_UI_COLOR_SYSTEM.md.
 * It intentionally changes presentation only: routes, RBAC, HTMX behaviour,
 * calculations and financial state remain owned by their existing domains.
 */

:root {
  /* Brand foundation */
  --t-brand-forest: #1F3A36;
  --t-brand-teal: #2F6F68;
  --t-brand-sage: #4D7C73;
  --t-brand-mint: #C7D6D2;
  --t-brand-mist: #F3F6F5;

  /* Surfaces and text */
  --t-surface-app: #F7F9F8;
  --t-surface-card: #FFFFFF;
  --t-surface-subtle: #F3F6F5;
  --t-border-default: #DDE6E3;
  --t-border-soft: #E9F0ED;
  --t-text-primary: #20322F;
  --t-text-secondary: #60736E;
  --t-text-muted: #8A9B97;
  --t-text-inverse: #FFFFFF;

  /* Navigation and interaction */
  --t-sidebar-bg: #1F3A36;
  --t-sidebar-hover: #294A45;
  --t-sidebar-active: #2F6F68;
  --t-sidebar-text: #F3F6F5;
  --t-sidebar-muted: #C7D6D2;
  --t-action-primary: #2F6F68;
  --t-action-primary-hover: #285E58;
  --t-focus-ring: #7FB8AE;
  --t-selected-bg: #E9F0ED;

  /* Semantic state */
  --t-success: #1E9E6A;
  --t-success-bg: #E6F6EF;
  --t-warning: #F4A63A;
  --t-warning-bg: #FFF4E0;
  --t-error: #D95C4F;
  --t-error-bg: #FDECEB;
  --t-info: #4B7BEC;
  --t-info-bg: #EEF2FF;
  --t-operational: #0E8A8A;
  --t-operational-bg: #E5F5F5;

  /* Stable financial / analytical meaning */
  --t-data-revenue: #1E9E6A;
  --t-data-profit: #2E7D32;
  --t-data-occupancy: #0E8A8A;
  --t-data-cashflow: #2F6F68;
  --t-data-expenses: #D9902F;
  --t-data-ota-commission: #8C7AE6;
  --t-data-owner-payout: #4B7BEC;
  --t-data-negative-variance: #D95C4F;

  /* Ordered fallback chart series */
  --t-chart-1: #2F6F68;
  --t-chart-2: #4D7C73;
  --t-chart-3: #7FB8AE;
  --t-chart-4: #F4A63A;
  --t-chart-5: #8C7AE6;
  --t-chart-6: #D95C4F;

  /* Compatibility aliases consumed by the existing component layer. */
  --color-canvas: var(--t-surface-app);
  --color-sidebar: var(--t-sidebar-bg);
  --color-surface: var(--t-surface-card);
  --color-border: var(--t-border-default);
  --color-border-soft: var(--t-border-soft);
  --color-ink: var(--t-text-primary);
  --color-ink-muted: var(--t-text-secondary);
  --color-ink-faint: var(--t-text-muted);
  --color-accent: var(--t-brand-teal);
  --color-accent-soft: var(--t-selected-bg);
  --color-positive: var(--t-success);
  --color-positive-soft: var(--t-success-bg);
  --color-warning: var(--t-warning);
  --color-warning-soft: var(--t-warning-bg);
  --color-critical: var(--t-error);
  --color-critical-soft: var(--t-error-bg);
  --color-neutral: var(--t-text-secondary);
  --color-neutral-soft: var(--t-surface-subtle);
}

html,
body,
.transparenta-cabinet {
  background: var(--t-surface-app);
  color: var(--t-text-primary);
}

::selection {
  background: var(--t-brand-mint);
  color: var(--t-brand-forest);
}

:focus-visible {
  outline-color: var(--t-focus-ring);
}

/* Persistent forest navigation is the strongest continuous colour field. */
.transparenta-sidebar {
  border-color: color-mix(in srgb, var(--t-brand-mint) 12%, transparent) !important;
  background: var(--t-sidebar-bg) !important;
}

.transparenta-sidebar-brand,
.transparenta-sidebar-footer,
.transparenta-nav .border-border,
.transparenta-sidebar-footer.border-border {
  border-color: color-mix(in srgb, var(--t-brand-mint) 14%, transparent) !important;
}

.transparenta-nav .section-label,
.transparenta-sidebar-footer .text-ink-muted,
.transparenta-user-chip .text-ink-muted,
.transparenta-sidebar-footer .text-ink-faint {
  color: var(--t-sidebar-muted) !important;
}

.transparenta-nav .nav-item {
  color: var(--t-sidebar-muted);
}

.transparenta-nav .nav-item:hover {
  background: var(--t-sidebar-hover);
  color: var(--t-sidebar-text);
}

.transparenta-nav .nav-item[aria-current="page"] {
  background: var(--t-sidebar-active);
  color: var(--t-text-inverse);
  box-shadow: inset 3px 0 0 var(--t-brand-mint);
}

.transparenta-nav .nav-item[aria-current="page"] .cirs-icon {
  color: var(--t-text-inverse);
}

.transparenta-sidebar .btn-ghost {
  color: var(--t-sidebar-muted);
}

.transparenta-sidebar .btn-ghost:hover:not(:disabled) {
  background: var(--t-sidebar-hover);
  color: var(--t-sidebar-text);
}

.transparenta-sidebar-footer .field {
  border-color: color-mix(in srgb, var(--t-brand-mint) 25%, transparent);
  background: color-mix(in srgb, var(--t-brand-mint) 9%, transparent);
  color: var(--t-sidebar-text);
}

.transparenta-user-avatar {
  background: color-mix(in srgb, var(--t-brand-mint) 18%, transparent) !important;
  color: var(--t-text-inverse) !important;
}

.transparenta-topbar {
  border-color: var(--t-border-default) !important;
  background: color-mix(in srgb, var(--t-surface-card) 95%, transparent) !important;
}

.transparenta-page-header h1,
.card-title,
.table tfoot td,
.tab[aria-selected="true"] {
  color: var(--t-brand-forest);
}

.card,
.table-wrap,
.transparenta-auth-card {
  border-color: var(--t-border-default);
  background: var(--t-surface-card);
}

.card--highlight {
  border-color: var(--t-brand-teal);
  box-shadow: inset 3px 0 0 var(--t-brand-teal);
}

.card--critical {
  border-color: var(--t-error);
  box-shadow: inset 3px 0 0 var(--t-error);
}

.section-label,
.label {
  color: var(--t-text-secondary);
}

.kpi-value {
  color: var(--t-text-primary);
}

/* Primary action = brand teal; forest remains a structural brand surface. */
.btn-primary {
  background: var(--t-action-primary);
  color: var(--t-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--t-action-primary-hover);
}

.btn-secondary {
  border-color: var(--t-brand-sage);
  background: var(--t-surface-card);
  color: var(--t-brand-teal);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--t-brand-teal);
  background: var(--t-selected-bg);
  color: var(--t-brand-forest);
}

.btn-ghost {
  color: var(--t-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--t-selected-bg);
  color: var(--t-brand-forest);
}

.btn-danger {
  color: var(--t-error);
}

.btn-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--t-error) 32%, white);
  background: var(--t-error-bg);
}

.field {
  border-color: var(--t-border-default);
  background-color: var(--t-surface-card);
  color: var(--t-text-primary);
}

.field:hover:not(:focus) {
  border-color: var(--t-brand-mint);
}

.field:focus {
  border-color: var(--t-brand-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-focus-ring) 28%, transparent);
}

.field-checkbox {
  accent-color: var(--t-brand-teal);
}

.tabs {
  border-color: var(--t-border-default);
}

.tab {
  color: var(--t-text-secondary);
}

.tab:hover {
  color: var(--t-brand-forest);
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--t-brand-teal);
}

.table {
  color: var(--t-text-primary);
}

.table thead th {
  border-color: var(--t-border-default);
  background: var(--t-surface-subtle);
  color: var(--t-text-secondary);
}

.table tbody td {
  border-color: var(--t-border-soft);
}

.table tbody tr:hover td {
  background: var(--t-surface-subtle);
}

.table tfoot td {
  border-color: var(--t-border-default);
  background: var(--t-brand-mist);
}

.table-link {
  color: var(--t-brand-forest);
}

.table-link:hover {
  color: var(--t-brand-teal);
}

/* Semantic state remains labelled in markup; colour is supplementary. */
.pill-positive,
.alert-positive {
  background: var(--t-success-bg);
  color: var(--t-success);
}

.pill-warning,
.alert-warning {
  background: var(--t-warning-bg);
  color: color-mix(in srgb, var(--t-warning) 82%, black);
}

.pill-critical,
.alert-critical {
  background: var(--t-error-bg);
  color: var(--t-error);
}

.pill-neutral,
.alert-neutral {
  border-color: var(--t-border-default);
  background: var(--t-surface-subtle);
  color: var(--t-text-secondary);
}

.pill-info,
.alert-info {
  background: var(--t-info-bg);
  color: var(--t-info);
}

/* Calendar operational emphasis. */
.cal-scroll {
  border-color: var(--t-border-default);
}

.cal-grid--reservations thead th,
.cal-grid--reservations tfoot th {
  background: var(--t-surface-subtle);
}

.cal-group {
  background: var(--t-brand-mist);
  color: var(--t-brand-forest);
}

.cal-today {
  background: var(--t-operational-bg);
}

.calendar-period-label,
.calendar-period-popover {
  border-color: var(--t-border-default);
}

/* Auth and shared entry surfaces use the same forest/light pairing. */
.transparenta-auth-shell,
.transparenta-auth-card {
  background: var(--t-surface-card);
}

.transparenta-auth-brand-panel {
  background: var(--t-brand-forest);
  color: var(--t-text-inverse);
}

.transparenta-auth-statement p,
.transparenta-brand--inverse .transparenta-descriptor {
  color: var(--t-brand-mint);
}

.transparenta-auth-main {
  background: var(--t-surface-app);
}

.transparenta-auth-kicker {
  color: var(--t-brand-teal);
}

.transparenta-auth-heading h1 {
  color: var(--t-brand-forest);
}

/* Stable analytical tones. Cards stay neutral; only meaningful accents change. */
.kpi-card--revenue .kpi-value,
.metric-revenue,
.money-tone-revenue {
  color: var(--t-data-revenue) !important;
}

.kpi-card--profit .kpi-value,
.metric-profit,
.money-tone-profit {
  color: var(--t-data-profit) !important;
}

.kpi-card--occupancy .kpi-value,
.metric-occupancy,
.money-tone-occupancy {
  color: var(--t-data-occupancy) !important;
}

.kpi-card--cashflow .kpi-value,
.metric-cashflow,
.money-tone-cashflow {
  color: var(--t-data-cashflow) !important;
}

.kpi-card--expenses .kpi-value,
.metric-expenses,
.money-tone-expenses {
  color: var(--t-data-expenses) !important;
}

.kpi-card--ota .kpi-value,
.metric-ota,
.money-tone-ota {
  color: var(--t-data-ota-commission) !important;
}

.kpi-card--payout .kpi-value,
.metric-payout,
.money-tone-payout {
  color: var(--t-data-owner-payout) !important;
}

.kpi-card--negative .kpi-value,
.metric-negative,
.money-tone-negative {
  color: var(--t-data-negative-variance) !important;
}

.money-tone-neutral {
  color: var(--t-text-primary) !important;
}

.kpi-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--t-surface-subtle);
  color: var(--t-text-muted);
}

.kpi-card--revenue .kpi-icon {
  background: var(--t-success-bg);
  color: var(--t-data-revenue);
}

.kpi-card--profit .kpi-icon {
  background: color-mix(in srgb, var(--t-data-profit) 10%, white);
  color: var(--t-data-profit);
}

.kpi-card--occupancy .kpi-icon {
  background: var(--t-operational-bg);
  color: var(--t-data-occupancy);
}

.kpi-card--cashflow .kpi-icon {
  background: var(--t-selected-bg);
  color: var(--t-data-cashflow);
}

.kpi-card--expenses .kpi-icon {
  background: color-mix(in srgb, var(--t-data-expenses) 12%, white);
  color: var(--t-data-expenses);
}

.kpi-card--ota .kpi-icon {
  background: color-mix(in srgb, var(--t-data-ota-commission) 11%, white);
  color: var(--t-data-ota-commission);
}

.kpi-card--payout .kpi-icon {
  background: var(--t-info-bg);
  color: var(--t-data-owner-payout);
}

.kpi-card--negative .kpi-icon {
  background: var(--t-error-bg);
  color: var(--t-data-negative-variance);
}

/* Normal costs are not errors. Negative accounting parentheses may remain,
 * but explicit cost tones override the legacy generic negative-red treatment.
 */
.financial-deduction--ota,
.financial-deduction--opex,
.financial-deduction--neutral {
  font-weight: 500;
}

.financial-deduction--ota {
  color: var(--t-data-ota-commission) !important;
}

.financial-deduction--opex {
  color: var(--t-data-expenses) !important;
}

.financial-deduction--neutral {
  color: var(--t-text-primary) !important;
}

@media (max-width: 899px) {
  .transparenta-auth-shell,
  .transparenta-auth-main {
    background: var(--t-brand-mist);
  }
}