/**
 * Ocean Sunset Theme - Dark Mode
 *
 * Color Palette:
 * - Ink Black (#001219): Ultra-dark backgrounds, infinite space
 * - Dark Teal (#005F73): Cards, surfaces, sophisticated depth
 * - Dark Cyan (#0A9396): Links, accents, modern sophistication
 * - Pearl Aqua (#94D2BD): Light accents, success states
 * - Wheat (#E9D8A6): Primary text, warmth and elegance
 * - Golden Orange (#EE9B00): Primary actions, creative flair
 * - Burnt Caramel (#CA6702): Hover states, toasted warmth
 * - Rusty Spice (#BB3E03): Warnings, energetic alerts
 * - Oxidized Iron (#AE2012): Errors, fiery passion
 * - Brown Red (#9B2226): Danger, critical actions
 *
 * To change the theme, simply update the color values in tailwind.config.js
 */

:root {
  /* Ocean Sunset Color Palette - CSS Variables for non-Tailwind usage */
  --color-ocean-ink: #001219;
  --color-ocean-deep: #005F73;
  --color-ocean-cyan: #0A9396;
  --color-ocean-aqua: #94D2BD;
  --color-ocean-wheat: #E9D8A6;
  --color-ocean-gold: #EE9B00;
  --color-ocean-caramel: #CA6702;
  --color-ocean-spice: #BB3E03;
  --color-ocean-iron: #AE2012;
  --color-ocean-rust: #9B2226;

  /* Semantic color mappings */
  --color-bg-primary: var(--color-ocean-ink);
  --color-bg-secondary: var(--color-ocean-deep);
  --color-bg-elevated: #003847; /* Slightly lighter than deep */

  --color-text-primary: var(--color-ocean-wheat);
  --color-text-secondary: var(--color-ocean-aqua);
  --color-text-muted: #7BA5A8;

  --color-accent-primary: var(--color-ocean-gold);
  --color-accent-secondary: var(--color-ocean-cyan);

  --color-border: rgba(148, 210, 189, 0.2); /* Pearl Aqua with opacity */
  --color-border-focus: var(--color-ocean-cyan);

  --color-success: var(--color-ocean-aqua);
  --color-warning: var(--color-ocean-spice);
  --color-error: var(--color-ocean-iron);
  --color-danger: var(--color-ocean-rust);
}

/* Base styles */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection colors */
::selection {
  background-color: var(--color-ocean-gold);
  color: var(--color-ocean-ink);
}

::-moz-selection {
  background-color: var(--color-ocean-gold);
  color: var(--color-ocean-ink);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ocean-deep);
  border-radius: 6px;
  border: 2px solid var(--color-bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ocean-cyan);
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

/* Page shell: the centered column that the header, the footer and every
   page's <main> share. Its cap follows the per-browser "Layout width"
   preference (Settings → General), which static/layout-loader.js writes to
   <html data-layout>. Below the cap the shell is always 100% wide, so phones
   and tablets are unaffected. Horizontal padding stays with the caller (px-4). */
:root {
  --page-shell-max: max(80vw, 80rem); /* compact (default): today's 1280px, or 80% on bigger screens */
}
:root[data-layout="wide"] {
  --page-shell-max: max(90vw, 80rem);
}
:root[data-layout="full"] {
  --page-shell-max: none;
}
.page-shell {
  width: 100%;
  max-width: var(--page-shell-max);
  margin-left: auto;
  margin-right: auto;
}

/* Utility classes for theme consistency */
.text-primary {
  color: var(--color-text-primary);
}

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

.text-muted {
  color: var(--color-text-muted);
}

.bg-primary {
  background-color: var(--color-bg-primary);
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.bg-elevated {
  background-color: var(--color-bg-elevated);
}

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

/* Smooth transitions */
.transition-theme {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Sessions timeline (components/market_timeline.rs). The four session colours
   are data colours, the same in every theme; everything else follows the
   theme. --mh-label is the width of the name column left of the track. */
:root {
  --mh-session-0: #94D2BD; /* Sydney */
  --mh-session-1: #E9D8A6; /* Tokyo */
  --mh-session-2: #0A9396; /* London */
  --mh-session-3: #EE9B00; /* New York */
}
.mh-timeline {
  --mh-label: 18rem;
}
.mh-label {
  width: var(--mh-label);
  flex-shrink: 0;
}
.mh-overlay {
  left: var(--mh-label);
}
.mh-veil {
  background: color-mix(in srgb, var(--bg-base) 58%, transparent);
}
.mh-grid {
  background: var(--border-muted);
}
.mh-grid-day {
  background: var(--text-tertiary);
  opacity: 0.6;
}
.mh-exchange {
  background: var(--text-tertiary);
}
.mh-holiday {
  border: 1px dashed var(--text-tertiary);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-tertiary) 45%, transparent) 0 3px,
    transparent 3px 6px
  );
}
.mh-dot-closed {
  border: 1.5px solid var(--text-tertiary);
}
/* Narrow track: names only on the left, no text inside strips, every other
   hour label. */
@media (max-width: 760px) {
  .mh-timeline {
    --mh-label: 7rem;
  }
  .mh-status,
  .mh-strip-label,
  .mh-tick-minor {
    display: none;
  }
}