/* Peers design tokens. One source for the design system page and the landing.
   Neutrals and type follow incetro.ru; the accent sits between amaranth and the Dozen's red, other candidates stay below. */

@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Regular.woff2") format("woff2"), url("../fonts/Gilroy-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Medium.woff2") format("woff2"), url("../fonts/Gilroy-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-SemiBold.woff2") format("woff2"), url("../fonts/Gilroy-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
/* Heading fonts of the app pictures (topic switcher, js/topic.js). One 500 file per script, declared for 500–700 so
   the 600 titles use it as is; the browser downloads a file only when a picture uses the font. */
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-500-cyrillic.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-500-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500-cyrillic.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-500-cyrillic.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-500-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Neutrals: Incetro gray scale */
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --gray-950: #030712;
  --white: #FFFFFF;

  --canvas: var(--gray-100);
  --surface: var(--white);
  --text: var(--gray-950);
  --text-2: var(--gray-700);
  --muted: #636975;                 /* gray-500 one step darker: 5:1 on the page canvas (gray-500 gives 4.4) */
  --border: var(--gray-200);
  --fill: var(--gray-200);          /* gray button, chip */
  --on-fill: var(--gray-700);
  --inverse: var(--gray-900);
  --on-inverse: #F9FAFB;
  --glass: rgb(255 255 255 / 0.8);
  /* Small plates inside white cards: lighter and cleaner than the page canvas */
  --plate: color-mix(in srgb, var(--canvas) 70%, var(--surface));

  /* Pictures of the product follow the page theme and take the one page accent: Telegram (--tg-*) and the mini app (--mk-*, its own palettes
     from mini_app/src/design-system/tokens.css: light gray page with white plates, dark black page with #171717 plates). */
  --tg-bg: #FFFFFF; --tg-bar: #F8F8F8; --tg-chat: #EEF2F6; --tg-line: #E3E6EA; --tg-text: #111111; --tg-muted: #636975; --tg-link: var(--accent);
  --tg-bubble: #FFFFFF; --tg-bubble-text: #1F2937; --tg-strong: #111827; --tg-meta: #6B7280; --tg-day: rgb(255 255 255 / 0.72); --tg-day-text: #5F6670;
  --tg-btn: rgb(255 255 255 / 0.8); --tg-wave: color-mix(in srgb, var(--accent) 30%, var(--tg-bubble)); --tg-media: #F8FAFC; --tg-media-2: #E2E8F0; --tg-figure: #CBD5E1; --tg-figure-2: #94A3B8;
  --tg-slide: #111827; --tg-slide-2: #4B5563; --tg-shadow: rgb(15 23 42 / 0.09);
  --mk-accent: var(--accent); --mk-on-accent: var(--on-accent); --mk-bg: #F3F4F6; --mk-card: #FFFFFF; --mk-soft: #F3F4F6; --mk-text: #030712; --mk-muted: #636975;
  --mk-ink: #111827; --mk-line: rgb(17 24 39 / 0.12); --mk-line-hover: rgb(17 24 39 / 0.28); --mk-status: #000000; --mk-chip: rgb(255 255 255 / 0.78); --mk-chip-text: #111111;

  /* Dark bands (08, 11) and the accent glow behind big blocks */
  --deep: #0E0E10;
  --glow: var(--accent);

  /* Accent: the page sets data-accent on <html>; Peers is deep coral. The fallback below is the same. */
  --accent-light: #CC1F30; --accent-dark: #EA3B47;
  --on-accent-light: #FFFFFF; --on-accent-dark: #FFFFFF;
  --accent: var(--accent-light);
  --on-accent: var(--on-accent-light);
  --accent-hover: color-mix(in srgb, var(--accent) 78%, #000);
  /* Surfaces with white text on them (filled buttons, posts on the map). The same as the accent in the light theme;
     in the dark one a deeper shade, so white text keeps 4.5:1 while links and accent text stay bright */
  --accent-fill-dark: var(--accent-dark);
  --accent-fill: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 6%, transparent);    /* large tinted areas */
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);   /* small marks on a tinted area */
  --accent-dot: color-mix(in srgb, var(--accent) 32%, transparent);

  /* Type: Gilroy, Incetro scale */
  --font: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.5rem, 6vw, 5.25rem);    /* 84 */
  --fs-title: clamp(2rem, 4.5vw, 4rem);          /* 64 */
  --fs-heading: clamp(1.5rem, 3.4vw, 3rem);      /* 48 */
  --fs-subhead: clamp(1.0625rem, 1.4vw, 1.25rem); /* 20 */
  --fs-body: 1rem;                               /* 16 */
  --fs-nav: 0.9375rem;                           /* 15 */
  --fs-small: 0.875rem;                          /* 14 */
  --fs-eyebrow: 1.125rem;                        /* 18 */

  /* Weights. Gilroy here has 400 / 500 / 600 only: running text stays 400 and gets denser through a darker colour,
     controls take 500, headings 600. */
  --fw-text: 400;
  --fw-ui: 500;
  --fw-heading: 600;

  /* Shape and depth */
  --r-pill: 9999px;
  --r-card: 1.5rem;     /* 24: rows such as the questions */
  --r-card-lg: 2.5rem;  /* 40: blocks and cards */
  --shadow-glass: 0 2px 48px rgba(0, 0, 0, 0.07);
  --shadow-glass-strong: 0 4px 56px rgba(0, 0, 0, 0.12);
  --blur-glass: 16px;

  /* Layout */
  --page-gutter: max(16px, 6vw);
  --content: 1280px;
  --mobile-control: 3.25rem;  /* 52 */

  /* Space */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6rem;
  --section-gap: clamp(6rem, 11vw, 10rem);   /* between landing sections */

  --ease: cubic-bezier(.22, .61, .36, 1);

  --z-header: 50;
  --z-menu: 70;
  --z-fab: 60;
  --z-dev: 95;
}

/* Accent candidates */
:root[data-accent="blue"]     { --accent-light: #005CFF; --accent-dark: #1E91FF; --on-accent-light: #FFFFFF; --on-accent-dark: #FFFFFF; --accent-fill-dark: #0F6FE8; }
:root[data-accent="coral"]    { --accent-light: #CC1F30; --accent-dark: #EA3B47; --on-accent-light: #FFFFFF; --on-accent-dark: #FFFFFF; }
:root[data-accent="green"]    { --accent-light: #0B7A55; --accent-dark: #2BD170; --on-accent-light: #FFFFFF; --on-accent-dark: #03140C; }
:root[data-accent="graphite"] { --accent-light: #111827; --accent-dark: #F9FAFB; --on-accent-light: #FFFFFF; --on-accent-dark: #030712; }
/* Accents of the topic palettes (js/topic.js): mint and gold, 5.5:1 and 5.9:1 on white, dark text on the bright dark-theme fill */
:root[data-accent="mint"]     { --accent-light: #0E766A; --accent-dark: #9BE7C4; --on-accent-light: #FFFFFF; --on-accent-dark: #03140C; }
:root[data-accent="gold"]     { --accent-light: #86683A; --accent-dark: #C4A878; --on-accent-light: #FFFFFF; --on-accent-dark: #1A1300; }

/* Dark theme: neutral grays without the blue cast of the Tailwind set, the same blacks as the mini app's dark palette */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0A0A0A; --surface: #161616; --text: #FAFAFA; --text-2: #D4D4D4; --muted: #A3A3A3;
    --border: #262626; --fill: #262626; --on-fill: #D4D4D4; --inverse: #FAFAFA; --on-inverse: #0A0A0A;
    --glass: rgb(22 22 22 / 0.8);
    --tg-bg: #1C1C1E; --tg-bar: #232325; --tg-chat: #0F0F10; --tg-line: #2C2C2E; --tg-text: #F5F5F7; --tg-muted: #8E8E93;
    --tg-bubble: #1F1F21; --tg-bubble-text: #E5E5EA; --tg-strong: #FFFFFF; --tg-meta: #8E8E93; --tg-day: rgb(255 255 255 / 0.08); --tg-day-text: #A1A1A6;
    --tg-btn: rgb(255 255 255 / 0.07); --tg-media: #26262A; --tg-media-2: #1C1C1F; --tg-figure: #4A4A50; --tg-figure-2: #3A3A40;
    --tg-slide: #F5F5F7; --tg-slide-2: #A1A1A6; --tg-shadow: rgb(0 0 0 / 0.45);
    --mk-bg: #000000; --mk-card: #171717; --mk-soft: #262626; --mk-text: #FFFFFF; --mk-muted: #A3A3A3;
    --mk-ink: #F5F5F5; --mk-line: rgb(255 255 255 / 0.14); --mk-line-hover: rgb(255 255 255 / 0.3); --mk-status: #FFFFFF; --mk-chip: rgb(38 38 38 / 0.78); --mk-chip-text: #F5F5F5;
    --deep: #161616;
    --glow: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent: var(--accent-dark); --on-accent: var(--on-accent-dark);
    --accent-fill: var(--accent-fill-dark);
    --accent-hover: color-mix(in srgb, var(--accent-fill) 85%, #000);
    --shadow-glass: 0 2px 48px rgba(0, 0, 0, 0.5); --shadow-glass-strong: 0 4px 56px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0A0A0A; --surface: #161616; --text: #FAFAFA; --text-2: #D4D4D4; --muted: #A3A3A3;
  --border: #262626; --fill: #262626; --on-fill: #D4D4D4; --inverse: #FAFAFA; --on-inverse: #0A0A0A;
  --glass: rgb(22 22 22 / 0.8);
  --tg-bg: #1C1C1E; --tg-bar: #232325; --tg-chat: #0F0F10; --tg-line: #2C2C2E; --tg-text: #F5F5F7; --tg-muted: #8E8E93;
  --tg-bubble: #1F1F21; --tg-bubble-text: #E5E5EA; --tg-strong: #FFFFFF; --tg-meta: #8E8E93; --tg-day: rgb(255 255 255 / 0.08); --tg-day-text: #A1A1A6;
  --tg-btn: rgb(255 255 255 / 0.07); --tg-media: #26262A; --tg-media-2: #1C1C1F; --tg-figure: #4A4A50; --tg-figure-2: #3A3A40;
  --tg-slide: #F5F5F7; --tg-slide-2: #A1A1A6; --tg-shadow: rgb(0 0 0 / 0.45);
  --mk-bg: #000000; --mk-card: #171717; --mk-soft: #262626; --mk-text: #FFFFFF; --mk-muted: #A3A3A3;
  --mk-ink: #F5F5F5; --mk-line: rgb(255 255 255 / 0.14); --mk-line-hover: rgb(255 255 255 / 0.3); --mk-status: #FFFFFF; --mk-chip: rgb(38 38 38 / 0.78); --mk-chip-text: #F5F5F5;
  --deep: #161616;
  --glow: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent: var(--accent-dark); --on-accent: var(--on-accent-dark);
  --accent-fill: var(--accent-fill-dark);
  --accent-hover: color-mix(in srgb, var(--accent-fill) 85%, #000);
  --shadow-glass: 0 2px 48px rgba(0, 0, 0, 0.5); --shadow-glass-strong: 0 4px 56px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (max-width: 767px) {
  :root { --mobile-side: 1.5rem; }
}