/* ── SITE-WIDE THEME ─────────────────────────────────────────────────────────
   Include on every page: <link rel="stylesheet" href="/theme.css">
   (Use ../../theme.css from dashboard subdirectories if not on a web server)
──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --color-bg:           #001e2a;   /* deep water — page background */
  --color-surface:      #002d3d;   /* cards, panels, table rows */
  --color-surface-hi:   #003a50;   /* hovered / active surface */

  /* Navigation */
  --color-nav:          rgba(0, 28, 40, 0.82);

  /* Primary — teal blue (from the water / fish) */
  --color-primary:      #7dd4e8;
  --color-primary-hi:   #c8f0f8;

  /* Accent — yellow (from the fish tail) */
  --color-accent:       #e8c020;
  --color-accent-hi:    #f5d84a;

  /* Text */
  --color-text:         #d0eef5;   /* main body text */
  --color-text-dim:     #5a9aaa;   /* secondary / muted labels */
  --color-text-inv:     #001e2a;   /* text on light/accent backgrounds */

  /* Borders & dividers */
  --color-border:       rgba(100, 210, 230, 0.14);
  --color-border-hi:    rgba(100, 210, 230, 0.32);

  /* Chart / data colors — distinct but harmonious with the palette */
  --color-data-1:       #7dd4e8;   /* teal */
  --color-data-2:       #e8c020;   /* yellow */
  --color-data-3:       #4db8a0;   /* seafoam green */
  --color-data-4:       #e07040;   /* warm coral */
  --color-data-5:       #a080d0;   /* soft purple */
  --color-data-6:       #60b8d0;   /* sky blue */

  /* Positive / negative (for financial data) */
  --color-positive:     #4db8a0;
  --color-negative:     #e07040;

  /* Typography */
  --font-sans:          system-ui, -apple-system, sans-serif;
  --font-mono:          ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  28px;
  --space-xl:  48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ── BASE RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--color-primary-hi);
  font-weight: 600;
  line-height: 1.25;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; color: var(--color-primary); }

p { margin-bottom: var(--space-md); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hi); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
code { padding: 1px 5px; }
pre  { padding: var(--space-md); overflow-x: auto; }

/* ── SURFACES ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* ── TABLES ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  color: var(--color-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-hi);
}
td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
tr:hover td { background: var(--color-surface-hi); }

/* ── FORMS ────────────────────────────────────────────────────────────────── */
input, select, textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border-hi);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: var(--space-sm) var(--space-md);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
button, .btn {
  background: var(--color-surface-hi);
  border: 1px solid var(--color-border-hi);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button:hover, .btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inv);
}
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inv);
}
.btn-accent:hover {
  background: var(--color-accent-hi);
  border-color: var(--color-accent-hi);
}

/* ── SCROLLBAR (Webkit) ───────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border-hi); border-radius: 99px; }