/* Coinfra design tokens: the single source for the landing (landing-v2.css) and the swap app (src/styles). */
:root {
  /* Ink / neutrals (light surfaces) */
  --cf-white: #fff;
  --cf-ink: #121214;
  --cf-ink-h1: #1d1d1f;
  --cf-text-2: #3d4148;
  --cf-muted: #6a6e73;
  --cf-t2: #7f838a;
  --cf-t3: #a1a5ab;
  --cf-h-dim: #8e9298;
  --cf-line: #e6e8eb;
  --cf-line-strong: #c9cdd3;
  --cf-tile: #f0f0f0;
  --cf-board: #f5f7fa;
  --cf-section-alt: #f3f5f8;
  --cf-accent: #000;
  --cf-accent-soft: #eceef1;

  /* Ink shades on light (shadows, hairlines): 1 < 5. */
  --cf-shade-1: rgba(16,24,40,.04);
  --cf-shade-2: rgba(16,24,40,.08);
  --cf-shade-3: rgba(16,24,40,.12);
  --cf-shade-4: rgba(16,24,40,.18);
  --cf-shade-5: rgba(16,24,40,.24);

  /* Dark surfaces (hero, dark tiles, footer, app): tile < dark < raised < hover < edge < control */
  --cf-dark: #111216;
  --cf-dark-tile: #0c0d10;
  --cf-dark-raised: #17181e;
  --cf-dark-hover: #1d1e24;
  --cf-dark-edge: #2b2d33;
  --cf-dark-control: #34363d;
  --cf-dark-control-hover: #4a4c54;
  --cf-black: #000;
  --cf-scrim: rgba(0,0,0,.72);
  --cf-sunken: rgba(0,0,0,.32);
  --cf-shadow-dark: rgba(0,0,0,.45);

  /* Privileges statuses: graphite, sapphire, amethyst, champagne. Glow + deep tone over the dark base. */
  --cf-tier-0: #3a3e48;
  --cf-tier-0-deep: #1a1c22;
  --cf-tier-1: #1d4a80;
  --cf-tier-1-deep: #0f2340;
  --cf-tier-2: #4f3391;
  --cf-tier-2-deep: #22163f;
  --cf-tier-3: #7f6b45;
  --cf-tier-3-deep: #221c10;
  /* Strong tones: the status button with white text (Селект, Премиум, Приват). */
  --cf-tier-1-strong: #2a62b8;
  --cf-tier-2-strong: #6a45c2;
  --cf-tier-3-strong: #8a703c;
  /* Light tints: status icons on dark and the top/bottom of the status button. */
  --cf-tier-0-light: #eef0f4;
  --cf-tier-0-soft: #c9ced8;
  --cf-tier-1-light: #d6e6ff;
  --cf-tier-1-soft: #8db6f2;
  --cf-tier-2-light: #e6dbff;
  --cf-tier-2-soft: #b39af0;
  --cf-tier-3-light: #fbefd5;
  --cf-tier-3-soft: #d9c08a;

  /* Glass (blurred surfaces), one variant per element type. */
  --cf-glass-bar: rgba(17,18,22,.94);
  --cf-glass-menu: linear-gradient(180deg, rgba(17,18,22,.94) 0%, rgba(24,25,30,.78) 100%);
  --cf-glass-panel: rgba(10,12,16,.78);
  --cf-glass-chip: rgba(28,29,34,.94);
  --cf-glass-chip-soft: rgba(28,29,34,.92);
  --cf-glass-card: linear-gradient(155deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 42%, rgba(0,0,0,.28) 100%);
  --cf-glass-light: rgba(255,255,255,.88);
  --cf-backdrop: rgba(0,0,0,.1);

  /* On dark: text (strong > 2 > 3 > 4), white fills (1 < 4), lines (line < mid < strong). The only alphas allowed on dark. */
  --cf-on-dark: #fff;
  --cf-on-dark-strong: rgba(255,255,255,.8);
  --cf-on-dark-2: rgba(255,255,255,.6);
  --cf-on-dark-3: rgba(255,255,255,.5);
  --cf-on-dark-4: rgba(255,255,255,.3);
  --cf-dark-fill-1: rgba(255,255,255,.04);
  --cf-dark-fill-2: rgba(255,255,255,.06);
  --cf-dark-fill-3: rgba(255,255,255,.08);
  --cf-dark-fill-4: rgba(255,255,255,.12);
  --cf-dark-line: rgba(255,255,255,.08);
  --cf-dark-line-mid: rgba(255,255,255,.12);
  --cf-dark-line-strong: rgba(255,255,255,.18);
  --cf-ring-dark: 0 0 0 3px var(--cf-on-dark-4);

  /* Market */
  --cf-up: #20b26c;
  --cf-down: #ef454a;
  --cf-up-text: #0f7a47;
  --cf-down-text: #c8282e;
  --cf-up-on-dark: #3ed08b;
  --cf-down-on-dark: #ff6b70;
  --cf-up-soft: rgba(32,178,108,.14);
  --cf-down-soft: rgba(239,69,74,.14);

  /* Third-party marks (SBP, store badges): exact brand colours, used only inside those marks. */
  --cf-sbp-yellow: #fab718;
  --cf-sbp-orange: #ed6f26;
  --cf-sbp-red: #d90751;
  --cf-sbp-purple: #984995;
  --cf-sbp-green: #63b22f;
  --cf-sbp-violet: #5b57a2;
  --cf-sbp-blue: #1487c9;
  --cf-sbp-deep-green: #017f36;
  --cf-store-line: #a6a6a6;
  --cf-rustore-blue: #0077ff;
  --cf-google-green: #34a853;
  --cf-google-blue: #4285f4;
  --cf-google-red: #ea4335;
  --cf-google-yellow: #fbbc04;

  /* Gradients (built from the tokens above) */
  --cf-gradient-tag: linear-gradient(180deg, var(--cf-dark-control-hover) 0%, var(--cf-dark-raised) 50%, var(--cf-black) 100%);
  --cf-g-ink: linear-gradient(180deg, var(--cf-dark-control) 0%, var(--cf-black) 100%);
  --cf-g-ink-hover: linear-gradient(180deg, var(--cf-dark-control-hover) 0%, var(--cf-dark) 100%);
  --cf-g-light: var(--cf-white);
  --cf-g-dark: radial-gradient(120% 80% at 100% 0%, var(--cf-dark-edge) 0%, var(--cf-dark) 50%, var(--cf-dark-tile) 100%);
  --cf-g-tier-0: radial-gradient(90% 120% at 100% 0%, var(--cf-tier-0) 0%, transparent 60%), radial-gradient(80% 110% at 0% 100%, var(--cf-tier-0-deep) 0%, transparent 70%), var(--cf-dark-tile);
  --cf-g-tier-1: radial-gradient(90% 120% at 100% 0%, var(--cf-tier-1) 0%, transparent 60%), radial-gradient(80% 110% at 0% 100%, var(--cf-tier-1-deep) 0%, transparent 70%), var(--cf-dark-tile);
  --cf-g-tier-2: radial-gradient(90% 120% at 100% 0%, var(--cf-tier-2) 0%, transparent 60%), radial-gradient(80% 110% at 0% 100%, var(--cf-tier-2-deep) 0%, transparent 70%), var(--cf-dark-tile);
  --cf-g-tier-3: radial-gradient(90% 120% at 100% 0%, var(--cf-tier-3) 0%, transparent 60%), radial-gradient(80% 110% at 0% 100%, var(--cf-tier-3-deep) 0%, transparent 70%), var(--cf-dark-tile);
  --cf-g-tier-0-btn: linear-gradient(180deg, var(--cf-tier-0-light) 0%, var(--cf-tier-0-soft) 100%);
  --cf-g-tier-1-btn: linear-gradient(180deg, var(--cf-tier-1-light) 0%, var(--cf-tier-1-soft) 100%);
  --cf-g-tier-2-btn: linear-gradient(180deg, var(--cf-tier-2-light) 0%, var(--cf-tier-2-soft) 100%);
  --cf-g-tier-3-btn: linear-gradient(180deg, var(--cf-tier-3-light) 0%, var(--cf-tier-3-soft) 100%);
  --cf-g-tier-1-cta: linear-gradient(180deg, var(--cf-tier-1-strong) 0%, var(--cf-tier-1) 100%);
  --cf-g-tier-2-cta: linear-gradient(180deg, var(--cf-tier-2-strong) 0%, var(--cf-tier-2) 100%);
  --cf-g-tier-3-cta: linear-gradient(180deg, var(--cf-tier-3-strong) 0%, var(--cf-tier-3) 100%);
  --cf-g-dark-line: linear-gradient(180deg, var(--cf-dark-line-strong) 0%, var(--cf-dark-fill-1) 100%);
  --cf-g-line: linear-gradient(90deg, transparent 0%, var(--cf-shade-5) 50%, transparent 100%);
  --cf-card-bg: linear-gradient(var(--cf-white), var(--cf-white)) padding-box, linear-gradient(180deg, var(--cf-shade-3) 0%, var(--cf-shade-1) 100%) border-box;
  --cf-tint-bg: var(--cf-board);
  --cf-tint-line: var(--cf-shade-1);
  --cf-ico-bg: linear-gradient(180deg, var(--cf-white) 0%, var(--cf-accent-soft) 100%);
  --cf-ico-line: var(--cf-shade-2);
  --cf-ico-dark-bg: linear-gradient(180deg, var(--cf-dark-line-strong) 0%, var(--cf-dark-fill-1) 100%);
  --cf-ico-dark-line: var(--cf-dark-line-mid);

  /* Radii */
  --cf-r-card: 24px;
  --cf-r-panel: 16px;
  --cf-r-ctl: 12px;
  --cf-r-tile-sm: 10px;
  --cf-r-sm: 8px;
  --cf-r-chg: 6px;
  --cf-r-pill: 100px;

  /* Elevation */
  --cf-sh-card: 0 1px 2px var(--cf-shade-1), 0 16px 40px -24px var(--cf-shade-3);
  --cf-sh-lift: 0 1px 2px var(--cf-shade-1), 0 28px 44px -18px var(--cf-shade-4);
  --cf-sh-main: 0 28px 64px -32px var(--cf-shade-5);
  --cf-sh-float: 0 1px 2px var(--cf-shade-1), 0 18px 36px -18px var(--cf-shade-5);
  --cf-sh-pop: 0 16px 32px -8px var(--cf-shade-4), 0 4px 8px -4px var(--cf-shade-1);
  --cf-sh-dark: 0 32px 64px -32px var(--cf-shadow-dark), inset 0 1px 0 var(--cf-dark-line);
  --cf-ring: 0 0 0 3px var(--cf-shade-2);

  /* Type scale: page title = landing .h2 (mobile), section = card title */
  --cf-fs-hero: 52px;
  --cf-lh-hero: 58px;
  --cf-fs-h2: 40px;
  --cf-lh-h2: 48px;
  --cf-fs-title: 28px;
  --cf-lh-title: 36px;
  --cf-fs-section: 20px;
  --cf-lh-section: 28px;

  /* Buttons (landing .btn / header pills) */
  --cf-btn-h: 48px;
  --cf-btn-h-xl: 56px;
  --cf-btn-h-sm: 36px;

  /* Layout / motion */
  --cf-container: 1200px;
  --cf-ease: .2s ease;
  --cf-sec-y: 96px;
  --cf-head-gap: 40px;
}

/* One scrollbar across coinfra.ru: the header «Сделки» menu look (4px, rounded thumb, no arrows).
   The thumb is a tint of the scroller's text colour: white on dark panels, ink on light pages.
   Chrome ignores ::-webkit-scrollbar once scrollbar-width/-color is set, so those are Firefox-only here.
   Layered so any component rule (e.g. a hidden carousel scrollbar) still wins. */
@layer base {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, currentColor 40%, transparent); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent; }
  }
}