/* cedric.invest — design tokens and base styles (mobile-first). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --gray-50: #f5f5f5;
  --gray-100: #ececec;
  --gray-200: #dedede;
  --gray-500: #8a8a8a;
  --gray-600: #6b6b6b;
  --gray-800: #262626;
  /* Functional colours for gains/losses only, muted and always paired with a sign. */
  --up: #1d6b45;
  --down: #a33a3a;

  --bg: var(--white);
  --bg-subtle: var(--gray-50);
  --surface: var(--white);
  --text: var(--black);
  --text-muted: var(--gray-600);
  --border: rgba(10, 10, 10, 0.08);
  --border-strong: rgba(10, 10, 10, 0.16);
  --focus: var(--black);
  --accent: var(--black);
  --accent-contrast: var(--white);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-solid: rgba(255, 255, 255, 0.97);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --content: 1120px;
  --nav-h: 60px;
  --tab-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: var(--black);
  --bg-subtle: #121212;
  --surface: #141414;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --focus: var(--white);
  --accent: var(--white);
  --accent-contrast: var(--black);
  --glass: rgba(20, 20, 20, 0.7);
  --glass-solid: rgba(20, 20, 20, 0.97);
  --up: #5fbf8f;
  --down: #e07a7a;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Focus given by the application (page title after navigation, element back from a dialog): no frame. */
[tabindex='-1']:focus, h1:focus, h2:focus { outline: 0; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.xsmall { font-size: 0.78rem; }
.up { color: var(--up); }
.down { color: var(--down); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}