/* Peers design tokens. One source for the design system page and the landing.
   Neutrals and type follow incetro.ru; the accent is switchable while we choose it. */

@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

: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: var(--gray-500);
  --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);

  /* Accent: switchable. Default is Incetro blue. */
  --accent-light: #005CFF; --accent-dark: #1E91FF;
  --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);
  --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: 2rem;       /* 32 */
  --r-card-lg: 3rem;    /* 48 */
  --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; }
:root[data-accent="coral"]    { --accent-light: #D9442F; --accent-dark: #F9655B; --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; }

/* Dark theme: Incetro design-tokens dark set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #030712; --surface: #111827; --text: #F9FAFB; --text-2: #D1D5DB; --muted: #9CA3AF;
    --border: #1F2937; --fill: #1F2937; --on-fill: #D1D5DB; --inverse: #F9FAFB; --on-inverse: #030712;
    --glass: rgb(17 24 39 / 0.8);
    --accent: var(--accent-dark); --on-accent: var(--on-accent-dark);
    --accent-hover: color-mix(in srgb, var(--accent) 80%, #fff);
    --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: #030712; --surface: #111827; --text: #F9FAFB; --text-2: #D1D5DB; --muted: #9CA3AF;
  --border: #1F2937; --fill: #1F2937; --on-fill: #D1D5DB; --inverse: #F9FAFB; --on-inverse: #030712;
  --glass: rgb(17 24 39 / 0.8);
  --accent: var(--accent-dark); --on-accent: var(--on-accent-dark);
  --accent-hover: color-mix(in srgb, var(--accent) 80%, #fff);
  --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; }
}