/*
  Gramium design system.

  Component styles live in the "legacy" cascade layer (main.css and page
  styles). Rules in this file are unlayered, so they win over the legacy
  layer and define the global look in one place:

  - neutral surfaces, hairline borders, no glows or decorative gradients;
  - one type scale; headings use weight and size, never shouting;
  - sentence case everywhere: no forced uppercase, no tracked labels;
  - the sans face for words, the mono face only for figures, dates,
    addresses and code;
  - one blue accent for actions, links and labels; green, red and amber
    stay reserved for data and state (gains, losses, warnings).
*/

:root {
  --bg-base: #0b0b0c;
  --bg-surface: #111113;
  --bg-elevated: #17171a;
  --text-primary: #ececee;
  --text-secondary: #a1a1aa;
  --text-muted: #77777f;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  /* Gramium blue: primary actions, links, active states and labels. */
  --accent: #4aa3ff;
  --accent-strong: #2f8cff;
  --accent-glow: transparent;
  --cyan: #8cc4ff;
  --positive: #4ade80;
  --negative: #f87171;
  --warning: #fbbf24;

  --bg-panel: var(--bg-surface);
  --bg-panel-strong: var(--bg-elevated);
  --surface-base: var(--bg-surface);
  --surface-raised: var(--bg-elevated);
  --surface-floating: #1c1c20;
  --surface-gradient: linear-gradient(transparent, transparent);
  --surface-glow: linear-gradient(transparent, transparent);
  --shadow-1: 0 0 #0000;
  --shadow-2: 0 0 #0000;
  --shadow-base: 0 0 #0000;
  --shadow-raised: 0 0 #0000;
  --shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow: 0 0 #0000;
  --edge-highlight: 0 0 #0000;

  --button-bg: #2f8cff;
  --button-ink: #ffffff;
  --button-bg-hover: #4aa3ff;
  --page-glow: rgba(47, 140, 255, 0.13);

  --font: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-h1: clamp(2.125rem, 1.55rem + 1.9vw, 3.25rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-h3: 1.0625rem;
  --text-label: 0.8125rem;
  --radius-card: 12px;
}

[data-theme="light"] {
  --bg-base: #fafafa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-primary: #0b0b0c;
  --text-secondary: #3f3f46;
  --text-muted: #6b6b73;
  --border-subtle: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent: #0a6fe0;
  --accent-strong: #0a6fe0;
  --cyan: #0a6fe0;
  --positive: #15803d;
  --negative: #b91c1c;
  --warning: #a16207;
  --surface-floating: #ffffff;
  --shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.12);
  --button-bg: #0a6fe0;
  --button-ink: #ffffff;
  --button-bg-hover: #0b5fc4;
  --page-glow: rgba(10, 111, 224, 0.07);
}

/* Surfaces ---------------------------------------------------------- */

body {
  background:
    radial-gradient(1100px 420px at 50% -140px, var(--page-glow), transparent 72%) no-repeat,
    var(--bg-base);
  font-family: var(--font);
}

.site-header {
  background: color-mix(in srgb, var(--bg-base) 94%, transparent);
  border-bottom-color: var(--border-subtle);
}

.brand img {
  filter: none;
}

/* Cards keep their borders and lose decorative paint. */
.home-data-status,
.market-table-wrap,
.native-swap-card,
.trading-chart-card,
.token-fact-strip,
.curated-ton-assets,
.insight-card,
.wallet-action-card,
.market-data-only-panel,
.project-share-preview,
.section.compact,
.card-icon {
  background-image: none;
  box-shadow: none;
}

.button,
.button.primary,
.home-discovery-search,
.filter-chip.active,
.timeframe-selector,
.stat-card,
.token-primary-stats,
details {
  box-shadow: none;
}

/* Typography -------------------------------------------------------- */

*,
::before,
::after {
  text-transform: none;
  letter-spacing: normal;
}

h1,
h2,
h3 {
  font-family: var(--font);
  text-wrap: balance;
  hyphens: manual;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.016em;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.006em;
}

/* Highlighted words inside headings read as plain heading text. */
h1 :is(span, em, strong, b, mark):not(.sr-only),
h2 :is(span, em, mark):not(.sr-only) {
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-style: normal;
}

/* Words use the sans face; containers that set mono for prose are reset. */
p,
li,
a,
button,
label,
summary,
legend,
blockquote,
figcaption,
.terminal-panel,
.home-discovery-core,
.home-sponsor-rail,
.home-mobile-sponsor-strip > header,
.home-revenue-freshness-note,
.home-revenue-today > header,
.home-revenue-today > footer,
.home-revenue-daily-link,
.home-directory-filters button,
.home-directory-empty,
.home-project-compare,
.project-profile-card > a,
.project-profile-breadcrumbs,
.project-evidence-links a,
.project-history-section > a,
.project-share-preview,
.project-share-preview p,
.revenue-daily-archive nav a,
.revenue-daily-data-links a,
.account-field input,
.account-field textarea,
.account-field select {
  font-family: var(--font);
}

/* Mono stays where alignment and exact characters matter. */
code,
kbd,
pre,
.copy-address,
.pool-address,
.token-contract,
.account-campaign-id,
.sponsor-admin-campaign-id,
.sponsor-admin-price-input input {
  font-family: var(--mono);
}

td,
th,
dd,
data,
time,
output,
strong {
  font-variant-numeric: tabular-nums;
}

/* Labels: small, quiet, sentence case. */
.eyebrow,
.stat-label,
[class*="-eyebrow"],
[class*="-kicker"],
.section-kicker,
.account-card-kicker,
.legal-card-kicker,
.teams-page-outline > p,
.teams-pricing h3 {
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Section labels carry the blue accent; data labels stay quiet. */
.eyebrow,
[class*="-eyebrow"],
[class*="-kicker"],
.section-kicker {
  color: var(--accent);
}

.eyebrow::before,
.eyebrow::after,
[class*="-eyebrow"]::before,
[class*="-kicker"]::before {
  content: none;
  display: none;
}

/* Badges: a quiet outline instead of a glowing pill. */
.beta-badge,
.badge,
.home-sponsor-label,
.home-sponsor-availability,
.news-category-badge,
.account-mode-badge,
.account-checkout-badge,
.account-auth-badge {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
}

.telegram-pill {
  background: transparent;
  box-shadow: none;
}

/* Buttons ----------------------------------------------------------- */

.button,
.teams-button {
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 500;
  gap: 0.375rem;
}

/* Components ------------------------------------------------------- */

/* Status panels: neutral frame, the state is carried by the label. */
.home-data-status {
  border-color: var(--border-subtle);
}

.home-data-status header span {
  color: var(--text-muted);
}

.home-revenue-freshness-note.is-stale {
  background: transparent;
  border-color: var(--border-subtle);
}

.home-sponsor-availability {
  border: 0;
  padding: 0;
  top: 12px;
  line-height: 27px;
}

/* Fact cards (project profiles, sponsor offer): figures, not posters. */
.project-revenue-facts strong {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.project-revenue-facts span {
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--text-muted);
}

.project-revenue-facts small {
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Stat cards: figures sized to fit their card at every width. */
.stat-value {
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Card titles inside content grids. */
.project-profile-content > div > h2 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.teams-page-outline li > span,
.teams-step-list li > span {
  color: var(--accent);
}

.teams-news-entry.radar-entry time {
  color: var(--accent);
}

.footer-links a {
  white-space: nowrap;
}

/* Learn and news cards: no tinted glows behind content. */
.learn-featured-card::before,
.learn-guide-card::before {
  background: none;
}

.learn-read-link,
.news-source-link {
  border-radius: 8px;
}

/* Swap details: quiet labels, readable values. */
.swap-panel-label,
.swap-meta-grid span {
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--text-muted);
}

.swap-meta-grid strong {
  font-weight: 500;
}

/* Terminal rows: long token names truncate before the Watch button. */
.token-cell .token-name {
  overflow: hidden;
}

.token-cell .token-name > a,
.token-cell .token-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Light theme: components that hard-code a dark fill take the theme surface. */
[data-theme="light"] :is(
  .footer,
  .panel,
  .stat-card,
  .terminal-card,
  .follow-share-band,
  .reader-next-step,
  .market-table-wrap,
  .home-discovery-search,
  .home-revenue-movers article,
  .home-revenue-movers header,
  .home-revenue-movers footer,
  .home-data-status article,
  .revenue-follow-return,
  .ton-analytics-kpis > article,
  .ton-analytics-chart-panel,
  .ton-data-faq details,
  .project-profile-content > div,
  .project-revenue-facts > article,
  .project-profile-method,
  .project-profile-faq,
  .project-share-preview,
  .project-share-tools,
  .project-claim-section,
  .project-evidence-section,
  .project-history-section,
  .revenue-daily-kpis > article,
  .revenue-daily-archive,
  .revenue-daily-ranking,
  .portfolio-metric,
  .portfolio-address-bar,
  .positioning-list a,
  .swap-asset-panel,
  .swap-flip-button,
  .native-swap-card,
  .search-field input,
  .learn-featured-card,
  .learn-guide-card,
  .learn-path-panel,
  .market-data-only-panel,
  .token-fact-strip,
  .token-market-structure,
  .trading-chart-card
) {
  background-color: var(--bg-surface);
  background-image: none;
}

[data-theme="light"] :is(.news-card, .news-lead-card, .news-rail-card) {
  background-color: var(--bg-surface);
}

.button.primary,
button.primary,
.teams-button {
  background: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-ink);
  box-shadow: none;
}

.button.primary:hover,
button.primary:hover,
.teams-button:hover {
  background: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  color: var(--button-ink);
}

.button.ghost,
.button.secondary {
  background: var(--bg-surface);
  border-color: var(--line-strong);
  color: var(--text-primary);
}

.button.ghost:hover,
.button.secondary:hover {
  background: var(--bg-elevated);
}