/*
 * maTOmaru PC contrast theme
 *
 * This stylesheet intentionally changes only color, border, background,
 * focus, selection, and subtle shadow presentation. Layout and mobile rules
 * remain owned by styles.css.
 */
@media (min-width: 981px) {
  :root:not([data-theme="dark"]) {
    /* App and surfaces */
    --bg-app: #F4EFE8;
    --bg-sidebar: #F8F4EE;
    --surface-primary: #FFFFFF;
    --surface-secondary: #FAF5EE;
    --surface-selected: #FFF3E8;

    /* Text */
    --text-primary: #2B2825;
    --text-secondary: #625A52;
    --text-muted: #7B736B;

    /* Borders */
    --border-default: #D9CFC4;
    --border-soft: #E8DFD6;

    /* Copper accent */
    --accent-primary: #B86F39;
    --accent-hover: #9E5A2B;
    --accent-soft-theme: #F4E4D6;
    --accent-pressed: color-mix(in srgb, var(--accent-hover) 86%, var(--text-primary));

    /* Semantic states */
    --success-primary: #2F7D5A;
    --success-soft: #E8F4ED;
    --danger-primary: #B94F45;
    --danger-soft: #FBE9E6;
    --warning-primary: #A76527;
    --warning-soft: #FFF0DE;

    /* Map the established application tokens to the shared palette. */
    --color-bg-app: var(--bg-app);
    --color-surface: var(--surface-primary);
    --color-surface-soft: var(--surface-secondary);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border-default);
    --color-border-soft: var(--border-soft);
    --color-border-strong: color-mix(in srgb, var(--accent-primary) 42%, var(--border-default));
    --color-parent-border: color-mix(in srgb, var(--border-default) 82%, transparent);
    --color-parent-surface: rgba(255, 255, 255, 0.72);
    --color-accent: var(--accent-primary);
    --color-accent-hover: var(--accent-hover);
    --color-accent-soft: var(--surface-selected);
    --color-accent-text: var(--accent-hover);
    --color-accent-deep: var(--accent-hover);
    --color-success-bg: var(--success-soft);
    --color-success-border: color-mix(in srgb, var(--success-primary) 36%, var(--border-default));
    --color-success-text: var(--success-primary);
    --color-danger-bg: var(--danger-soft);
    --color-danger-border: color-mix(in srgb, var(--danger-primary) 36%, var(--border-default));
    --color-danger-text: var(--danger-primary);
    --color-warning-bg: var(--warning-soft);
    --color-warning-border: color-mix(in srgb, var(--warning-primary) 36%, var(--border-default));
    --color-warning-text: var(--warning-primary);
    --reservation-status-done-bg: var(--success-soft);
    --reservation-status-done-border: color-mix(in srgb, var(--success-primary) 36%, var(--border-default));
    --reservation-status-done-text: var(--success-primary);
    --reservation-status-cancelled-bg: var(--surface-secondary);
    --reservation-status-cancelled-border: var(--border-default);
    --reservation-status-cancelled-text: var(--text-muted);
    --queue-handoff-bg: var(--success-soft);
    --queue-handoff-border: color-mix(in srgb, var(--success-primary) 36%, var(--border-default));
    --queue-handoff-text: var(--success-primary);
    --queue-reply-bg: var(--danger-soft);
    --queue-reply-border: color-mix(in srgb, var(--danger-primary) 36%, var(--border-default));
    --queue-reply-text: var(--danger-primary);

    --bg: var(--bg-app);
    --surface: var(--surface-primary);
    --surface-soft: var(--surface-secondary);
    --surface-muted: var(--surface-secondary);
    --surface-strong: var(--accent-soft-theme);
    --ink: var(--text-primary);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --line: var(--border-default);
    --border: var(--border-default);
    --border-strong: color-mix(in srgb, var(--accent-primary) 42%, var(--border-default));
    --accent: var(--accent-primary);
    --accent-strong: var(--accent-hover);
    --accent-soft: var(--surface-selected);
    --accent-text: var(--accent-hover);
    --warning: var(--warning-primary);
    --danger: var(--danger-primary);
    --ok: var(--success-primary);
    --shadow-card: 0 1px 3px rgba(55, 43, 32, 0.06);
    --shadow-selected: 0 1px 3px rgba(55, 43, 32, 0.06);
    --shadow: var(--shadow-card);
  }

  :root:not([data-theme="dark"]) body,
  :root:not([data-theme="dark"]) .workspace {
    background: var(--bg-app);
    color: var(--text-primary);
  }

  :root:not([data-theme="dark"]) .sidebar {
    background: var(--bg-sidebar);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .topbar {
    background: var(--bg-app);
  }

  :root:not([data-theme="dark"]) .logo-wordmark,
  :root:not([data-theme="dark"]) h1,
  :root:not([data-theme="dark"]) h2,
  :root:not([data-theme="dark"]) h3,
  :root:not([data-theme="dark"]) h4,
  :root:not([data-theme="dark"]) strong {
    color: var(--text-primary);
  }

  :root:not([data-theme="dark"]) .logo-accent {
    color: var(--accent-primary);
  }

  :root:not([data-theme="dark"]) a:not(.danger-button),
  :root:not([data-theme="dark"]) .inline-link {
    color: var(--accent-hover);
  }

  :root:not([data-theme="dark"]) .panel,
  :root:not([data-theme="dark"]) .empty-state,
  :root:not([data-theme="dark"]) .settings-card,
  :root:not([data-theme="dark"]) .settings-section,
  :root:not([data-theme="dark"]) .calendar-day,
  :root:not([data-theme="dark"]) .reservation-list-item,
  :root:not([data-theme="dark"]) .reservation-history-panel,
  :root:not([data-theme="dark"]) .field-card,
  :root:not([data-theme="dark"]) .sales-card,
  :root:not([data-theme="dark"]) .sales-panel,
  :root:not([data-theme="dark"]) .sales-stat,
  :root:not([data-theme="dark"]) .sales-rank-item,
  :root:not([data-theme="dark"]) .area-sales-item,
  :root:not([data-theme="dark"]) .queue-item,
  :root:not([data-theme="dark"]) .growth-loop-card,
  :root:not([data-theme="dark"]) .validation-card,
  :root:not([data-theme="dark"]) .x-reply-item,
  :root:not([data-theme="dark"]) .x-reply-meta-card,
  :root:not([data-theme="dark"]) .privacy-lock-card,
  :root:not([data-theme="dark"]) .reservation-dialog,
  :root:not([data-theme="dark"]) .body-marker-size-panel,
  :root:not([data-theme="dark"]) .customer-summary-card,
  :root:not([data-theme="dark"]) .today-dashboard-card,
  :root:not([data-theme="dark"]) .x-dm-status-bar,
  :root:not([data-theme="dark"]) .x-dm-work-summary-card,
  :root:not([data-theme="dark"]) .x-dm-layout > .x-dm-column,
  :root:not([data-theme="dark"]) .external-links-view .panel {
    background: var(--surface-primary);
    border-color: var(--border-default);
    box-shadow: var(--shadow-card);
  }

  :root:not([data-theme="dark"]) .customer-card,
  :root:not([data-theme="dark"]) .customer-item,
  :root:not([data-theme="dark"]) .suggestion-item,
  :root:not([data-theme="dark"]) .check-item,
  :root:not([data-theme="dark"]) .message-item,
  :root:not([data-theme="dark"]) .reservation-history-scroll,
  :root:not([data-theme="dark"]) .reservation-history-table td {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .today-overview-stat-grid .queue-stat {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
    box-shadow: var(--shadow-card);
  }

  :root:not([data-theme="dark"]) .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon {
    background: var(--accent-soft-theme);
    color: var(--accent-hover);
  }

  :root:not([data-theme="dark"]) .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon {
    background: var(--warning-soft);
    color: var(--warning-primary);
  }

  :root:not([data-theme="dark"]) .today-overview-stat-grid .queue-stat.x-summary .queue-stat-icon {
    background: var(--surface-secondary);
    color: var(--text-primary);
  }

  :root:not([data-theme="dark"]) .today-overview-stat-grid .queue-stat.records .queue-stat-icon {
    background: var(--success-soft);
    color: var(--success-primary);
  }

  :root:not([data-theme="dark"]) .sales-stat.primary {
    background: var(--surface-selected);
    border-color: var(--accent-primary);
  }

  :root:not([data-theme="dark"]) .sales-stat.new-frame {
    background: var(--surface-secondary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .sales-stat.repeat-frame,
  :root:not([data-theme="dark"]) .today-visit-type.repeat,
  :root:not([data-theme="dark"]) .today-task-card.post_session_memo .today-task-type,
  :root:not([data-theme="dark"]) .today-task-card.profile_gap .today-task-type {
    background: var(--success-soft);
    color: var(--success-primary);
    border-color: var(--color-success-border);
  }

  :root:not([data-theme="dark"]) .sales-comment {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-soft);
    box-shadow: none;
  }

  :root:not([data-theme="dark"]) .today-task-type {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .customer-card:hover,
  :root:not([data-theme="dark"]) .customer-item:hover,
  :root:not([data-theme="dark"]) .sales-rank-item.is-clickable:hover,
  :root:not([data-theme="dark"]) .reservation-history-row:hover td,
  :root:not([data-theme="dark"]) .reservation-history-row:focus-visible td,
  :root:not([data-theme="dark"]) .today-reservation-card:hover,
  :root:not([data-theme="dark"]) .today-task-card:hover,
  :root:not([data-theme="dark"]) .today-tomorrow-card:hover {
    background: var(--surface-secondary);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card);
  }

  :root:not([data-theme="dark"]) .nav-category-button.active,
  :root:not([data-theme="dark"]) .nav-item.is-active,
  :root:not([data-theme="dark"]) .customer-card.is-selected,
  :root:not([data-theme="dark"]) .customer-item.is-selected,
  :root:not([data-theme="dark"]) .customer-card.selected,
  :root:not([data-theme="dark"]) .customer-item.selected,
  :root:not([data-theme="dark"]) .customer-card.active,
  :root:not([data-theme="dark"]) .customer-item.active,
  :root:not([data-theme="dark"]) .x-dm-work-summary-card.is-active,
  :root:not([data-theme="dark"]) .x-dm-conversation.active {
    background: var(--surface-selected);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: inset 4px 0 0 var(--accent-primary), var(--shadow-selected);
  }

  :root:not([data-theme="dark"]) .tab.is-active,
  :root:not([data-theme="dark"]) .x-dm-inbox-tab.active,
  :root:not([data-theme="dark"]) .customer-seg-chip.active,
  :root:not([data-theme="dark"]) .customer-filter-button.active,
  :root:not([data-theme="dark"]) .secondary-button.active,
  :root:not([data-theme="dark"]) .appearance-button.active,
  :root:not([data-theme="dark"]) #pinCustomerButton.active {
    background: var(--surface-selected);
    color: var(--accent-hover);
    border-color: var(--accent-primary);
    box-shadow: none;
  }

  :root:not([data-theme="dark"]) input,
  :root:not([data-theme="dark"]) textarea,
  :root:not([data-theme="dark"]) select {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) input::placeholder,
  :root:not([data-theme="dark"]) textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }

  :root:not([data-theme="dark"]) input:focus,
  :root:not([data-theme="dark"]) textarea:focus,
  :root:not([data-theme="dark"]) select:focus,
  :root:not([data-theme="dark"]) button:focus-visible,
  :root:not([data-theme="dark"]) a:focus-visible {
    border-color: var(--accent-primary);
    outline-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 24%, transparent);
  }

  :root:not([data-theme="dark"]) .primary-button,
  :root:not([data-theme="dark"]) .button-primary,
  :root:not([data-theme="dark"]) .btn-primary {
    background: var(--accent-hover);
    color: #FFFFFF;
    border-color: var(--accent-hover);
    box-shadow: none;
  }

  :root:not([data-theme="dark"]) .primary-button:hover,
  :root:not([data-theme="dark"]) .button-primary:hover,
  :root:not([data-theme="dark"]) .btn-primary:hover {
    background: var(--accent-pressed);
    color: #FFFFFF;
    border-color: var(--accent-pressed);
  }

  :root:not([data-theme="dark"]) .secondary-button,
  :root:not([data-theme="dark"]) .button-secondary,
  :root:not([data-theme="dark"]) .btn-secondary,
  :root:not([data-theme="dark"]) .icon-button,
  :root:not([data-theme="dark"]) .calendar-nav-button,
  :root:not([data-theme="dark"]) .reservation-list-toggle,
  :root:not([data-theme="dark"]) .today-quick-action-grid button {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
    box-shadow: none;
  }

  :root:not([data-theme="dark"]) .secondary-button:hover,
  :root:not([data-theme="dark"]) .button-secondary:hover,
  :root:not([data-theme="dark"]) .btn-secondary:hover,
  :root:not([data-theme="dark"]) .icon-button:hover,
  :root:not([data-theme="dark"]) .calendar-nav-button:hover,
  :root:not([data-theme="dark"]) .reservation-list-toggle:hover,
  :root:not([data-theme="dark"]) .today-quick-action-grid button:hover {
    background: var(--surface-secondary);
    color: var(--accent-hover);
    border-color: var(--accent-primary);
  }

  :root:not([data-theme="dark"]) .primary-button:disabled,
  :root:not([data-theme="dark"]) .secondary-button:disabled,
  :root:not([data-theme="dark"]) .text-button:disabled,
  :root:not([data-theme="dark"]) button:disabled {
    background: var(--surface-secondary);
    color: var(--text-muted);
    border-color: var(--border-soft);
    box-shadow: none;
    opacity: 0.68;
  }

  :root:not([data-theme="dark"]) .customer-badge,
  :root:not([data-theme="dark"]) .badge,
  :root:not([data-theme="dark"]) .tag,
  :root:not([data-theme="dark"]) .tag-chip,
  :root:not([data-theme="dark"]) .customer-tag,
  :root:not([data-theme="dark"]) .header-pill {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .header-pill-stage,
  :root:not([data-theme="dark"]) .header-pill-tag,
  :root:not([data-theme="dark"]) .header-pill-vip {
    background: var(--accent-soft-theme);
    color: var(--accent-hover);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .header-pill-repeat,
  :root:not([data-theme="dark"]) .reservation-badge.status-confirmed,
  :root:not([data-theme="dark"]) .reservation-status-tag.status-confirmed,
  :root:not([data-theme="dark"]) .growth-badge.ok,
  :root:not([data-theme="dark"]) .ai-status-box.enabled,
  :root:not([data-theme="dark"]) .sales-stat-card.positive,
  :root:not([data-theme="dark"]) .field-progress.active,
  :root:not([data-theme="dark"]) .check-item.ok {
    background: var(--success-soft);
    color: var(--success-primary);
    border-color: var(--color-success-border);
  }

  :root:not([data-theme="dark"]) .customer-badge.warn,
  :root:not([data-theme="dark"]) .growth-badge.warn,
  :root:not([data-theme="dark"]) .reservation-badge.status-tentative,
  :root:not([data-theme="dark"]) .reservation-status-tag.status-tentative,
  :root:not([data-theme="dark"]) .dm-assist-check.warn,
  :root:not([data-theme="dark"]) .check-item.warn,
  :root:not([data-theme="dark"]) .today-visit-type,
  :root:not([data-theme="dark"]) .today-task-card.manual_followup .today-task-type {
    background: var(--warning-soft);
    color: color-mix(in srgb, var(--warning-primary) 86%, var(--text-primary));
    border-color: var(--color-warning-border);
  }

  :root:not([data-theme="dark"]) .danger-button,
  :root:not([data-theme="dark"]) .secondary-button.danger,
  :root:not([data-theme="dark"]) .customer-badge.urgent,
  :root:not([data-theme="dark"]) .reservation-badge.status-noshow,
  :root:not([data-theme="dark"]) .reservation-status-tag.status-noshow,
  :root:not([data-theme="dark"]) .growth-badge.urgent,
  :root:not([data-theme="dark"]) .dm-assist-check.danger,
  :root:not([data-theme="dark"]) .check-item.danger,
  :root:not([data-theme="dark"]) .x-dm-latest-unreplied,
  :root:not([data-theme="dark"]) .x-dm-status-bar.has-error .x-dm-status-message {
    background: var(--danger-soft);
    color: var(--danger-primary);
    border-color: var(--color-danger-border);
  }

  :root:not([data-theme="dark"]) .reservation-paste-card,
  :root:not([data-theme="dark"]) .counseling-sheet-card,
  :root:not([data-theme="dark"]) .follow-up-rule-box,
  :root:not([data-theme="dark"]) .growth-loop-rule,
  :root:not([data-theme="dark"]) .daily-report-settings,
  :root:not([data-theme="dark"]) .google-calendar-sync,
  :root:not([data-theme="dark"]) .post-session-memo-box,
  :root:not([data-theme="dark"]) .session-note-card .form-grid.one-col,
  :root:not([data-theme="dark"]) .dm-assist-incoming,
  :root:not([data-theme="dark"]) .dm-assist-selected-box,
  :root:not([data-theme="dark"]) .customer-next-action,
  :root:not([data-theme="dark"]) .x-dm-message:not(.outgoing),
  :root:not([data-theme="dark"]) .empty-queue,
  :root:not([data-theme="dark"]) .x-dm-empty,
  :root:not([data-theme="dark"]) .dm-sent-history-empty,
  :root:not([data-theme="dark"]) .today-empty-state {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border-color: var(--border-soft);
  }

  :root:not([data-theme="dark"]) .x-dm-message.outgoing,
  :root:not([data-theme="dark"]) .message-item.sent,
  :root:not([data-theme="dark"]) .official-line-message.sent,
  :root:not([data-theme="dark"]) .today-reply-message.is-sent {
    background: var(--success-soft);
    color: var(--text-primary);
    border-color: var(--color-success-border);
  }

  :root:not([data-theme="dark"]) .message-item.incoming {
    background: var(--surface-secondary);
    border-color: var(--border-default);
    border-left-color: var(--accent-primary);
  }

  :root:not([data-theme="dark"]) .message-item.sent {
    border-left-color: var(--success-primary);
  }

  :root:not([data-theme="dark"]) .reservation-history-table th,
  :root:not([data-theme="dark"]) table thead th {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  :root:not([data-theme="dark"]) .reservation-history-table tbody tr:nth-child(even) td,
  :root:not([data-theme="dark"]) table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-secondary) 58%, var(--surface-primary));
  }

  :root:not([data-theme="dark"]) .muted,
  :root:not([data-theme="dark"]) small,
  :root:not([data-theme="dark"]) label span,
  :root:not([data-theme="dark"]) .panel-header p,
  :root:not([data-theme="dark"]) .customer-meta,
  :root:not([data-theme="dark"]) .message-meta,
  :root:not([data-theme="dark"]) .x-dm-message-meta,
  :root:not([data-theme="dark"]) .queue-lead,
  :root:not([data-theme="dark"]) .save-status,
  :root:not([data-theme="dark"]) .nav-group-label,
  :root:not([data-theme="dark"]) .today-reservation-row-time,
  :root:not([data-theme="dark"]) .today-reservation-row-duration,
  :root:not([data-theme="dark"]) .today-reservation-row-place,
  :root:not([data-theme="dark"]) .today-reservation-row-course,
  :root:not([data-theme="dark"]) .today-task-card time,
  :root:not([data-theme="dark"]) .today-tomorrow-card > time,
  :root:not([data-theme="dark"]) .today-tomorrow-card > span {
    color: var(--text-secondary);
  }

  :root:not([data-theme="dark"]) .x-dm-status-message,
  :root:not([data-theme="dark"]) .queue-refresh-status,
  :root:not([data-theme="dark"]) .today-x-summary-list b,
  :root:not([data-theme="dark"]) .today-dashboard-text-button,
  :root:not([data-theme="dark"]) .reservation-history-customer-link {
    color: var(--accent-hover);
  }

  :root:not([data-theme="dark"]) .x-dm-status-bar {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  :root:not([data-theme="dark"]) .x-dm-header-status-card {
    border-color: var(--border-default);
    background: var(--surface-primary);
    box-shadow: var(--shadow-card);
  }
}