/* ============================================================
   TradingView Design Language — drop-in tokens + base styles
   Measured from de.tradingview.com (homepage, pricing, BTCUSD symbol page),
   September 2026.

   Usage: <body class="tv">            light theme (default)
          <body class="tv tv--dark">   dark theme
   Registers: add .tv-marketing or .tv-product to a region. The register
   decides radius, density and whether the display face is allowed.

   Euclid Circular is licensed; Poppins 600 is the closest free substitute:
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Faces. The system stack is deliberate, not a fallback. ---- */
  --tv-font-display: "Euclid Circular", "Poppins", -apple-system, system-ui, sans-serif;
  --tv-font: -apple-system, system-ui, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
  /* lining + tabular figures: price columns must align digit over digit */
  --tv-numeric: "lnum", "tnum";

  --tv-w-regular: 400;
  --tv-w-semibold: 600;

  /* ---- Display steps (Euclid only) ---- */
  --tv-hero-xl: 80px;   --tv-hero-xl-lh: 1;     --tv-hero-xl-ls: -0.02em;
  --tv-hero: 64px;      --tv-hero-lh: 1;        --tv-hero-ls: -0.04em;
  --tv-display: 48px;   --tv-display-lh: 1.167; --tv-display-ls: -0.02em;

  /* ---- System-font steps (zero tracking throughout) ---- */
  --tv-title-xl: 48px;  --tv-title-xl-lh: 1.167;
  --tv-title-lg: 28px;  --tv-title-lg-lh: 1.286;
  --tv-lead: 28px;      --tv-lead-lh: 1.43;
  --tv-lead-sm: 20px;   --tv-lead-sm-lh: 1.5;
  --tv-title-md: 20px;  --tv-title-md-lh: 1.2;
  --tv-title-sm: 16px;  --tv-title-sm-lh: 1.25;
  --tv-data: 24px;      --tv-data-lh: 1.2;
  --tv-body: 14px;      --tv-body-lh: 1.286;

  /* ---- Radius encodes the register: 8px marketing, 4px product ---- */
  --tv-radius-xs: 4px;
  --tv-radius-sm: 6px;
  --tv-radius-md: 8px;
  --tv-radius-lg: 12px;
  --tv-radius-xl: 14px;
  --tv-radius-2xl: 16px;
  --tv-radius-3xl: 24px;
  --tv-radius-pill: 40px;
  --tv-radius-circle: 50%;

  /* ---- Inline spacing (product grid) ---- */
  --tv-space-xs: 4px;
  --tv-space-sm: 8px;
  --tv-space-md: 16px;
  --tv-space-lg: 24px;
  --tv-space-xl: 32px;
  --tv-space-2xl: 48px;

  /* ---- Vertical rhythm (marketing only), desktop tier ---- */
  --tv-rhythm-1: 200px;
  --tv-rhythm-2: 160px;
  --tv-rhythm-3: 120px;
  --tv-rhythm-4: 80px;
  --tv-rhythm-5: 48px;
  --tv-header-space-1: 120px;
  --tv-header-space-2: 40px;
  --tv-header-space-3: 24px;

  /* ---- Layout ---- */
  --tv-header-height: 64px;

  /* ---- Motion ---- */
  --tv-ease: cubic-bezier(.67, 0, .34, 1);
  --tv-speed: .5s;

  /* ---- Elevation: one shadow, otherwise a rule ---- */
  --tv-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  --tv-shadow-blur: 56px;

  /* ---- Market data. These do NOT change between themes. ---- */
  --tv-growing: #089981;          /* fills, candles, badges */
  --tv-positive-content: #06806b; /* the same green, darkened for text */
  --tv-positive-active: #056656;
  --tv-falling: #f23645;          /* holds contrast on both fill and text */
  --tv-falling-active: #cc2f3c;
  --tv-falling-tint: #ffebec;
  --tv-warning: #f57c00;
  --tv-warning-soft: #fb8c00;

  /* ---- Brand: a focus and link colour, not a CTA fill ---- */
  --tv-brand: #2962ff;
  --tv-brand-hover: #1e53e5;
  --tv-brand-active: #1848cc;
  --tv-symbol-cyan: #00bcd4;
}

/* Responsive tiers for the vertical rhythm scale */
@media (max-width: 1439px) {
  :root { --tv-rhythm-1: 160px; --tv-rhythm-2: 120px; --tv-rhythm-3: 88px;
          --tv-rhythm-4: 64px;  --tv-rhythm-5: 40px;  --tv-header-space-1: 100px;
          --tv-header-space-2: 32px; }
}
@media (max-width: 1023px) {
  :root { --tv-rhythm-1: 120px; --tv-rhythm-2: 88px; --tv-rhythm-3: 64px;
          --tv-rhythm-4: 48px;  --tv-rhythm-5: 32px; --tv-header-space-1: 80px;
          --tv-header-space-2: 24px; --tv-header-space-3: 16px; }
}
@media (max-width: 767px) {
  :root { --tv-rhythm-1: 80px; --tv-rhythm-2: 64px; --tv-rhythm-3: 48px;
          --tv-rhythm-4: 48px; --tv-rhythm-5: 32px; --tv-header-space-1: 56px;
          --tv-header-space-2: 16px; }
}

/* ============================================================
   Themes — everything inverts except the market colours above
   ============================================================ */
.tv {
  --tv-bg-primary: #ffffff;
  --tv-bg-secondary: #f9f9f9;
  --tv-bg-tertiary: #f2f2f2;
  --tv-bg-neutral: #ebebeb;
  --tv-bg-dark: #2e2e2e;
  --tv-bg-accent-light: #e3effd;
  --tv-bg-accent-tint: #bbd9fb;
  --tv-text-primary: #0f0f0f;
  --tv-text-secondary: #707070;
  --tv-text-tertiary: #9c9c9c;
  --tv-text-disabled: #a8a8a8;
  --tv-divider: #ebebeb;
  --tv-border-neutral: #a8a8a8;
  --tv-border-light: #ebebeb;
  --tv-border-strong: #b8b8b8;
}
.tv--dark {
  --tv-bg-primary: #000000;
  --tv-bg-secondary: #1f1f1f;
  --tv-bg-tertiary: #2e2e2e;
  --tv-bg-neutral: #3d3d3d;
  --tv-bg-dark: #4a4a4a;
  --tv-text-primary: #dbdbdb;
  --tv-text-secondary: #8c8c8c;
  --tv-text-tertiary: #9c9c9c;   /* the one text value shared by both themes */
  --tv-divider: #3d3d3d;
  --tv-border-neutral: #808080;
  --tv-border-light: #3d3d3d;
}

/* ============================================================
   Base
   ============================================================ */
.tv {
  margin: 0;
  font-family: var(--tv-font);
  font-size: var(--tv-body);
  line-height: var(--tv-body-lh);
  font-weight: var(--tv-w-regular);
  color: var(--tv-text-primary);
  background: var(--tv-bg-primary);
  -webkit-font-smoothing: antialiased;
}
.tv h1, .tv h2, .tv h3, .tv p { margin: 0; }
.tv a { color: var(--tv-brand); text-decoration: none; }
.tv a:focus-visible, .tv button:focus-visible { outline: 2px solid var(--tv-brand); outline-offset: 2px; }

/* ---- Display steps: Euclid, marketing register only ---- */
.tv .hero-xl, .tv .hero, .tv .display {
  font-family: var(--tv-font-display);
  font-weight: var(--tv-w-semibold);
  color: var(--tv-text-primary);
  text-wrap: balance;
}
.tv .hero-xl { font-size: var(--tv-hero-xl); line-height: var(--tv-hero-xl-lh); letter-spacing: var(--tv-hero-xl-ls); }
.tv .hero    { font-size: var(--tv-hero);    line-height: var(--tv-hero-lh);    letter-spacing: var(--tv-hero-ls); }
.tv .display { font-size: var(--tv-display); line-height: var(--tv-display-lh); letter-spacing: var(--tv-display-ls); }

/* ---- System-font steps: zero tracking, never negative ---- */
.tv .title-xl { font-size: var(--tv-title-xl); line-height: var(--tv-title-xl-lh); font-weight: var(--tv-w-semibold); color: var(--tv-text-primary); }
.tv .title-lg { font-size: var(--tv-title-lg); line-height: var(--tv-title-lg-lh); font-weight: var(--tv-w-semibold); color: var(--tv-text-primary); }
.tv .title-md { font-size: var(--tv-title-md); line-height: var(--tv-title-md-lh); font-weight: var(--tv-w-semibold); color: var(--tv-text-primary); }
.tv .title-sm { font-size: var(--tv-title-sm); line-height: var(--tv-title-sm-lh); font-weight: var(--tv-w-semibold); color: var(--tv-text-primary); }
.tv .lead     { font-size: var(--tv-lead);     line-height: var(--tv-lead-lh);     color: var(--tv-text-secondary); }
.tv .lead-sm  { font-size: var(--tv-lead-sm);  line-height: var(--tv-lead-sm-lh);  color: var(--tv-text-secondary); }
.tv .body     { font-size: var(--tv-body);     line-height: var(--tv-body-lh); }
.tv .caption  { font-size: var(--tv-body);     line-height: var(--tv-body-lh); color: var(--tv-text-secondary); }

/* ---- Numbers: any figure a user might compare gets tabular lining ---- */
.tv .num, .tv .data, .tv td, .tv .quote-change {
  font-feature-settings: var(--tv-numeric);
  font-variant-numeric: lining-nums tabular-nums;
}
.tv .data { font-size: var(--tv-data); line-height: var(--tv-data-lh); font-weight: var(--tv-w-semibold); }

/* ---- Market data: colour plus sign, never colour alone ---- */
.tv .quote-change { font-weight: var(--tv-w-semibold); }
.tv .quote-change--up   { color: var(--tv-positive-content); }
.tv .quote-change--down { color: var(--tv-falling); }
.tv .badge-up   { background: var(--tv-growing); color: #fff; }
.tv .badge-down { background: var(--tv-falling); color: #fff; }

/* ---- Buttons. The marketing CTA is grey, not brand blue. ---- */
.tv .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tv-space-sm);
  font: inherit; font-size: var(--tv-body); font-weight: var(--tv-w-regular);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--tv-bg-tertiary); color: var(--tv-text-primary);
  border-radius: var(--tv-radius-md); height: 48px; padding: 0 23px;
  transition: background-color .15s var(--tv-ease), border-color .15s var(--tv-ease);
}
.tv .btn:active { background: var(--tv-bg-neutral); }
.tv .btn--on-media {
  background: var(--tv-bg-primary); color: var(--tv-text-primary);
  border-color: var(--tv-border-light); border-width: 2px;
  border-radius: var(--tv-radius-pill); height: 56px; padding: 0 30px;
}
.tv .btn--brand { background: var(--tv-brand); color: #fff; border-color: var(--tv-brand); }
.tv .btn--brand:active { background: var(--tv-brand-active); border-color: var(--tv-brand-active); }
.tv .chip {
  display: inline-flex; align-items: center; font: inherit;
  font-size: var(--tv-title-sm); font-weight: var(--tv-w-semibold);
  background: var(--tv-bg-tertiary); color: var(--tv-text-primary);
  border: 0; border-radius: var(--tv-radius-md); height: 40px; padding: 0 var(--tv-space-md);
  cursor: pointer;
}
.tv .search {
  display: inline-flex; align-items: center;
  background: var(--tv-bg-dark); color: var(--tv-text-tertiary);
  border-radius: var(--tv-radius-pill); height: 40px; padding: 6px 16px;
  font-size: var(--tv-body);
}

/* ---- Registers ---- */
.tv .tv-marketing { --tv-register-radius: var(--tv-radius-md); }
.tv .tv-product   { --tv-register-radius: var(--tv-radius-xs); }

.tv .card {
  background: var(--tv-bg-primary);
  border: 1px solid var(--tv-border-light);
  border-radius: var(--tv-register-radius, var(--tv-radius-md));
  padding: var(--tv-space-lg);
}
.tv .tv-product .card { border-color: var(--tv-divider); padding: var(--tv-space-md); }
.tv .card--feature { border-radius: var(--tv-radius-2xl); }

.tv .header {
  position: sticky; top: 0; z-index: 100;
  height: var(--tv-header-height);
  display: flex; align-items: center; gap: var(--tv-space-lg);
  background: var(--tv-bg-primary);
}
.tv .divider { border: 0; border-top: 1px solid var(--tv-divider); margin: 0; }
.tv .section { padding-block: var(--tv-rhythm-3); }
.tv .section-heading + * { margin-top: var(--tv-header-space-2); }

/* ---- Data table: rules, never shadows, between rows ---- */
.tv table { width: 100%; border-collapse: collapse; font-size: var(--tv-body); }
.tv th, .tv td { text-align: left; padding: var(--tv-space-sm) var(--tv-space-md); border-bottom: 1px solid var(--tv-divider); }
.tv th { font-weight: var(--tv-w-semibold); color: var(--tv-text-secondary); }
.tv td.num, .tv th.num { text-align: right; }