/*
 * NomadRocks time-of-day palette
 *
 * These named values are the shared source for the Home colour lab and
 * customer-facing pages that follow the current Nairobi mood.
 */
:root {
  --dawn-background: #e6a268;
  --dawn-surface: #f3c89e;
  --dawn-text: #4c2817;
  --dawn-muted: #4c2817;
  --dawn-line: #ba7f59;
  --dawn-accent: #ff9900;
  --dawn-notification-background: #4c2817;
  --dawn-notification-text: #fffaf2;

  --day-background: #f4f2eb;
  --day-surface: #ffffff;
  --day-text: #0a3a66;
  --day-muted: #4d5964;
  --day-line: #d7dadf;
  --day-accent: #f39a19;
  --day-notification-background: #0a3a66;
  --day-notification-text: #ffffff;

  --dusk-background: #6c718b;
  --dusk-surface: #7c8199;
  --dusk-text: #fffaf2;
  --dusk-muted: #fffaf2;
  --dusk-line: #979aae;
  --dusk-accent: #ff9b55;
  --dusk-notification-background: #1b2433;
  --dusk-notification-text: #f3f5f7;

  --night-background: #111827;
  --night-surface: #1b2433;
  --night-text: #f3f5f7;
  --night-muted: #9fa8b7;
  --night-line: #344053;
  --night-accent: #ff9900;
  --night-notification-background: #1b2433;
  --night-notification-text: #f3f5f7;

  /* Day is the no-JavaScript fallback. */
  --nomad-time-background: var(--day-background);
  --nomad-time-surface: var(--day-surface);
  --nomad-time-text: var(--day-text);
  --nomad-time-muted: var(--day-muted);
  --nomad-time-line: var(--day-line);
  --nomad-time-accent: var(--day-accent);
  --nomad-time-notification-background: var(--day-notification-background);
  --nomad-time-notification-text: var(--day-notification-text);
  --nomad-time-accent-contrast: #171717;
  --nomad-time-transition: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nomad-time-transition: 0ms; }
}

html[data-nomad-time-mood="dawn"] {
  --nomad-time-background: var(--dawn-background);
  --nomad-time-surface: var(--dawn-surface);
  --nomad-time-text: var(--dawn-text);
  --nomad-time-muted: var(--dawn-muted);
  --nomad-time-line: var(--dawn-line);
  --nomad-time-accent: var(--dawn-accent);
  --nomad-time-notification-background: var(--dawn-notification-background);
  --nomad-time-notification-text: var(--dawn-notification-text);
}

html[data-nomad-time-mood="day"] {
  --nomad-time-background: var(--day-background);
  --nomad-time-surface: var(--day-surface);
  --nomad-time-text: var(--day-text);
  --nomad-time-muted: var(--day-muted);
  --nomad-time-line: var(--day-line);
  --nomad-time-accent: var(--day-accent);
  --nomad-time-notification-background: var(--day-notification-background);
  --nomad-time-notification-text: var(--day-notification-text);
}

html[data-nomad-time-mood="dusk"] {
  --nomad-time-background: var(--dusk-background);
  --nomad-time-surface: var(--dusk-surface);
  --nomad-time-text: var(--dusk-text);
  --nomad-time-muted: var(--dusk-muted);
  --nomad-time-line: var(--dusk-line);
  --nomad-time-accent: var(--dusk-accent);
  --nomad-time-notification-background: var(--dusk-notification-background);
  --nomad-time-notification-text: var(--dusk-notification-text);
}

html[data-nomad-time-mood="night"] {
  --nomad-time-background: var(--night-background);
  --nomad-time-surface: var(--night-surface);
  --nomad-time-text: var(--night-text);
  --nomad-time-muted: var(--night-muted);
  --nomad-time-line: var(--night-line);
  --nomad-time-accent: var(--night-accent);
  --nomad-time-notification-background: var(--night-notification-background);
  --nomad-time-notification-text: var(--night-notification-text);
}

/* Modal surfaces use a paired time-of-day palette. Active controls use the
   opposite time-of-day palette as their highlight. */
:root {
  --nomad-time-modal-background: var(--dawn-surface);
  --nomad-time-modal-text: var(--dawn-text);
  --nomad-time-modal-muted: var(--dawn-muted);
  --nomad-time-modal-line: var(--dawn-line);
  --nomad-time-highlight-background: var(--night-background);
  --nomad-time-highlight-text: var(--night-text);
}

html[data-nomad-time-mood="dawn"] {
  --nomad-time-modal-background: var(--day-surface);
  --nomad-time-modal-text: var(--day-text);
  --nomad-time-modal-muted: var(--day-muted);
  --nomad-time-modal-line: var(--day-line);
  --nomad-time-highlight-background: var(--night-background);
  --nomad-time-highlight-text: var(--night-text);
}

html[data-nomad-time-mood="day"] {
  --nomad-time-modal-background: var(--dawn-surface);
  --nomad-time-modal-text: var(--dawn-text);
  --nomad-time-modal-muted: var(--dawn-muted);
  --nomad-time-modal-line: var(--dawn-line);
  --nomad-time-highlight-background: var(--dusk-background);
  --nomad-time-highlight-text: var(--dusk-text);
}

html[data-nomad-time-mood="dusk"] {
  --nomad-time-modal-background: var(--night-surface);
  --nomad-time-modal-text: var(--night-text);
  --nomad-time-modal-muted: var(--night-muted);
  --nomad-time-modal-line: var(--night-line);
  --nomad-time-highlight-background: var(--day-background);
  --nomad-time-highlight-text: var(--day-text);
}

html[data-nomad-time-mood="night"] {
  --nomad-time-modal-background: var(--dusk-surface);
  --nomad-time-modal-text: var(--dusk-text);
  --nomad-time-modal-muted: var(--dusk-muted);
  --nomad-time-modal-line: var(--dusk-line);
  --nomad-time-highlight-background: var(--dawn-background);
  --nomad-time-highlight-text: var(--dawn-text);
}