/* ==========================================================================
   MIKA — site tokens
   Layered on top of style-library/ (colours, spacing, radii, type, shadows
   copied verbatim from elmica.ru/fresh). Nothing below is a new palette —
   it maps this landing page's roles onto the shared scale, so a change here
   changes the whole page and stays in step with the main site.
   Values sampled from the approved design (САЙТ РФ.pdf).
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------
     The design's red is a shade hotter than the shared --color-primary, so
     it is declared once here and every accent on the page reads from it. */
  --mika-accent: #cd2f1a;
  --mika-accent-hover: #b32915;
  --mika-accent-soft: rgba(205, 47, 26, 0.08);
  --mika-logo-red: #c94836;

  /* ---- Surfaces --------------------------------------------------------- */
  --mika-surface: var(--color-white);
  --mika-surface-alt: var(--color-gray-light-3);      /* #F5F5F5 panels */
  --mika-surface-band: #ababab;                        /* grey bar over hero */
  --mika-surface-inverse: var(--color-gray-deep-1);

  /* ---- Text -------------------------------------------------------------- */
  --mika-text: #1a1a1a;
  --mika-text-muted: var(--color-gray-mid);
  --mika-text-inverse: var(--color-white);
  --mika-text-on-accent: var(--color-white);

  /* ---- Lines ------------------------------------------------------------- */
  --mika-border: var(--color-gray-light);
  --mika-border-strong: var(--color-gray-mid-2);

  /* ---- Typography -------------------------------------------------------
     Display sizes are fluid so headings never need a per-breakpoint rule. */
  --mika-font: var(--font-primary);

  --mika-display-1: clamp(1.75rem, 1.05rem + 2.6vw, 3rem);   /* hero band   */
  --mika-display-2: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);  /* section h2  */
  --mika-display-3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);/* block title */
  --mika-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --mika-body: var(--font-size-md);
  --mika-body-sm: var(--font-size-base);

  --mika-tracking-display: var(--letter-spacing-tight);
  --mika-tracking-label: var(--letter-spacing-wider);

  /* ---- Rhythm -----------------------------------------------------------
     Section padding is fluid; everything else rides the 4px scale. */
  --mika-section-y: clamp(var(--spacing-12), 6vw, var(--spacing-28));
  --mika-block-gap: clamp(var(--spacing-6), 3vw, var(--spacing-12));
  --mika-gutter: clamp(var(--spacing-4), 4vw, var(--spacing-10));
  --mika-container: 1200px;
  --mika-container-narrow: 900px;

  /* ---- Shape ------------------------------------------------------------- */
  --mika-radius-card: var(--radius-lg);
  --mika-radius-media: var(--radius-md);
  --mika-radius-pill: var(--radius-full);

  /* ---- Elevation --------------------------------------------------------- */
  --mika-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --mika-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10);
  --mika-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);

  /* ---- Motion ------------------------------------------------------------ */
  --mika-transition: 180ms ease;
  --mika-transition-slow: 320ms ease;
  /* Borrowed from the main site, where cards scale on hover at this timing. */
  --mika-transition-card: 0.25s ease-out;
  --mika-transition-tint: 0.2s ease;

  /* ---- Component sizes ---------------------------------------------------
     Fixed pixel sizes that do not ride the 4px spacing scale: they are the
     size of a THING (a logo, an icon, a tap target), not a gap between
     things, so scaling them with the rhythm would be wrong. Collected here
     so each one has a single place to change. Values are as set in the
     layout — nothing below changes how the page currently renders. */
  --mika-logo-h: 40px;          /* header wordmark */
  --mika-logo-h-sm: 32px;       /* …on phones */
  --mika-icon-sm: 18px;         /* glyph inside a round button */
  --mika-industry-icon: 56px;   /* industry tile icon, matches the main site */
  --mika-carousel-btn: 40px;    /* carousel arrow */
  --mika-fab: 44px;             /* back-to-top, minimum comfortable tap target */
  --mika-bullet: 8px;           /* red dot in a bullet list */
  --mika-bullet-sm: 6px;        /* …in the compact variant */
  --mika-burger-w: 22px;
  --mika-burger-h: 16px;
  --mika-burger-bar: 2px;

  /* ---- Layers ------------------------------------------------------------ */
  --mika-z-header: 100;
  --mika-z-drawer: 110;
  --mika-z-top: 120;

  /* ---- Hero bars ---------------------------------------------------------
     Height of the grey slab over the red band. Half of it overhangs upward,
     so this one number drives both the bar and the space reserved for it. */
  --mika-band-grey-h: 30px;

  /* ---- Fixed chrome ------------------------------------------------------
     Header height is a token because the scroll-margin of every anchored
     section is derived from it — change one number, anchors stay correct. */
  --mika-header-h: 72px;
}

@media (max-width: 768px) {
  :root {
    --mika-header-h: 60px;
  }
}