/* The Sector — Theme */
/* Clean light theme inspired by Ocean Talent Solutions */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Ocean blue palette */
  --blue: #296FB1;
  --blue-light: #359CEF;
  --blue-dark: #1d5a94;
  --blue-deep: #0f3d6b;
  --blue-pale: #e8f1fa;
  --blue-mist: #f0f6fc;

  /* Backgrounds */
  --bg: #ffffff;
  --bg-alt: #f7f9fc;
  --bg-section: #f1f5f9;

  /* Cards */
  --card: #ffffff;
  --card-hover: #fafbfd;

  /* Borders */
  --border: #e2e8f0;
  --border-hover: #cbd5e1;

  /* Text */
  --text: #334155;
  --text-dim: #64748b;
  --text-bright: #0f172a;
  --text-muted: #94a3b8;

  /* Gold accent (logo identity) */
  --gold: #e8b94a;
  --gold-dark: #c9953c;
  --nav-bg: #0a1628;

  /* Sector accents */
  --oil: #296FB1;
  --mining: #b45309;
  --energy: #047857;

  /* Status */
  --up: #047857;
  --down: #dc2626;
  --accent-red: #dc2626;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px;
}

a { color: var(--blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--blue-dark); }

/* Direction indicators */
.up { color: var(--up); font-weight: 600; }
.down { color: var(--down); font-weight: 600; }
.neutral { color: var(--text-dim); }

::selection {
  background: rgba(41,111,177,0.15);
  color: var(--text-bright);
}

/* Base responsive */
@media (max-width: 768px) {
  .container { padding: 16px 14px; }
}

@media (max-width: 480px) {
  .container { padding: 14px 10px; }
  body { font-size: 15px; }
}