/**
 * Base Styles
 * 
 * Foundation styles including typography, resets, and global elements.
 * These styles apply to the entire application.
 */

/* ==========================================================================
   Base HTML Elements
   ========================================================================== */

html {
  box-sizing: border-box;
  /* Always show vertical scrollbar to prevent content shift */
  overflow-y: scroll;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  font-size: var(--text-md, 15px);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text-primary, #292623);
  background: var(--color-bg-primary, #ffffff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   HTML Element Defaults
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary, #292623);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-tight, 1.2);
  margin: 0 0 var(--space-2, 8px) 0;
}

h1 {
  font-size: var(--text-3xl, 30px);
}
h2 {
  font-size: var(--text-2xl, 24px);
}
h3 {
  font-size: var(--text-xl, 20px);
}
h4 {
  font-size: var(--text-lg, 18px);
}
h5 {
  font-size: var(--text-md, 15px);
}
h6 {
  font-size: var(--text-sm, 14px);
}

p {
  color: var(--color-text-secondary, #5a5652);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0 0 var(--space-4, 16px) 0;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */

/* Large heading/title */
.k {
  font-size: var(--text-2xl, 24px);
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-primary, #292623);
  letter-spacing: var(--tracking-tight, -0.5px);
  margin: 0 0 var(--space-2, 8px) 0;
}

/* Value/data display */
.v {
  font-size: var(--text-md, 15px);
  font-weight: var(--weight-normal, 400);
  color: var(--color-text-secondary, #5a5652);
}

/* Monospace text (code, account numbers) */
.mono {
  font-family: var(
    --font-mono,
    "SF Mono",
    Monaco,
    "Cascadia Code",
    "Roboto Mono",
    Consolas,
    "Courier New",
    monospace
  );
  font-size: var(--text-xs, 12px);
  letter-spacing: -0.02em;
}

/* Subdued/secondary text */
.sub {
  color: var(--color-text-tertiary, #8b8682);
  font-size: var(--text-sm, 13px);
}

/* Strong emphasis */
.strong {
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-inverse, #ffffff);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--color-primary-main, #30525c);
  text-decoration: none;
  transition: var(--transition-colors, color 0.15s ease);
}

a:hover {
  color: var(--color-primary-light, #4c848d);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--primary-3, #477bbd);
  outline-offset: 2px;
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
  background: var(--color-primary-main, #30525c);
  color: white;
}

::-moz-selection {
  background: var(--color-primary-main, #30525c);
  color: white;
}

/* ==========================================================================
   Scrollbar (Webkit)
   ========================================================================== */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-secondary, #faf9f8);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary, #ddd8d4);
  border-radius: var(--radius-md, 6px);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-primary, #edeae7);
}

/* ==========================================================================
   Focus Visible
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--primary-3, #477bbd);
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}