/* =============================================================
   RENTROP HR — DESIGN TOKENS
   Extracted pixel-perfect from Figma (node: 506:862 + siblings)
   ============================================================= */

:root {
  /* ---- COLORS ---- */
  /* Brand — deep navy → mid blue gradient used in tg-header, app-space, navmenu */
  --color-navy-900: #17344F;        /* rgb(23,52,79)   — tg header, nav bottom */
  --color-navy-700: #265582;        /* rgb(38,85,130)  — app-space bg, nav top */
  --color-navy-500: #3C87CF;        /* rgb(60,135,207) — gradient mid */

  /* Brand accent — gold */
  --color-gold-300: #F4EE8E;        /* rgb(244,238,142) — gradient start */
  --color-gold-500: #E7C768;        /* rgb(231,199,104) — primary gold (icons, active nav) */
  --color-gold-700: #D99E41;        /* rgb(217,158,65)  — gradient end */

  /* Semantic action */
  --color-orange-500: #E54C00;      /* rgb(229,76,0)   — registration CTA arrow */
  --color-red-500:    #FF1A1A;      /* rgb(255,26,26)  — arrow gradient start */

  /* Surfaces */
  --color-bg-content:    #EDEDED;   /* main-space */
  --color-surface-white: #FFFFFF;
  --color-surface-blue:  #E5F2FF;   /* rgb(229,242,255) — sub-cards on Главная */
  --color-surface-blue2: #F2F9FF;   /* rgb(242,249,255) — «Продолжите регистрацию» */
  --color-surface-mint:  #E9F6EC;   /* rgb(233,246,236) — HR chip */

  /* Text */
  --color-text-primary: #191919;    /* rgb(25,25,25) */
  --color-text-on-dark: #FFFFFF;
  --color-text-muted:   rgba(25,25,25,0.6);
  --color-text-ghost:   rgba(25,25,25,0.3);

  /* Telegram chrome */
  --color-dynamic-island: #1A1A1A;
  --color-status-icon:    #FFFFFF;

  /* ---- GRADIENTS ---- */
  --grad-header:   linear-gradient(180deg, #17344F 0%, #265582 100%); /* title bar */
  --grad-nav:      linear-gradient(180deg, #265582 0%, #17344F 100%); /* bottom nav */
  --grad-gold:     linear-gradient(180deg, #F4EE8E 0%, #D99E41 100%); /* gold accents */
  --grad-cta:      linear-gradient(180deg, #FF1A1A 0%, #E54C00 100%); /* orange arrow */

  /* ---- TYPOGRAPHY ---- */
  --font-ui:     'Golos Text', 'Inter', system-ui, -apple-system, sans-serif;
  --font-tg:     'Inter', system-ui, -apple-system, sans-serif;

  /* sizes (all px — Telegram webapp uses fixed viewport) */
  --fs-screen-title: 20px;   /* «Главная», «Чат» etc. — Golos 500 */
  --fs-tg-title:     16px;   /* Rentrop HR — Inter 700 */
  --fs-tg-subtitle:  13px;   /* mini app   — Inter 400 */
  --fs-body:         14px;   /* card titles — Golos 500 */
  --fs-small:        12px;   /* row labels, hr chip, body 2 */
  --fs-xsmall:       10px;   /* nav label, meta lines */
  --fs-huge:         24px;   /* big stat number — used on stats card */

  /* ---- RADII ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-tg-header: 16px 16px 10px 10px;
  --radius-main-space: 16px 16px 0 0;

  /* ---- SPACING ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- LAYOUT (mobile mini-app — iPhone 15 / 393×852) ---- */
  --mobile-width:        393px;
  --mobile-height:       852px;
  --mobile-status-h:     59px;
  --mobile-tg-header-h:  57px;
  --mobile-title-h:      56px;
  --mobile-navmenu-h:    90px;

  /* ---- SHADOWS ---- */
  --shadow-card: 0 2px 8px rgba(23, 52, 79, 0.04);
}