/* =========================================================
   Малахит / Мелдана — Design Tokens
   VSaaS + СКУД platform
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@600&display=swap');

/* ---------------------------------------------------------
   COLORS — Base Palette
   --------------------------------------------------------- */
:root {
  /* Primary */
  --color-primary:        #4DC1C8;   /* rgb(77,193,200)  — teal accent */
  --color-primary-dark:   #3aa8af;   /* hover/pressed state */
  --color-primary-light:  #9CD4DC;   /* rgb(156,212,220) — muted teal */

  /* Dark Theme Surfaces */
  --color-bg-deepest:     #161616;   /* rgb(22,22,22)    — sidebar */
  --color-bg-dark:        #393939;   /* rgb(57,57,57)    — main content */
  --color-bg-surface:     #2C2C2C;   /* rgb(44,44,44)    — card on dark */
  --color-bg-surface-2:   #292828;   /* rgb(41,40,40)    — elevated panel */

  /* Light Theme Surfaces */
  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F5F5F5;   /* rgb(245,245,245) — panel bg */
  --color-bg-light-2:     #F4F4F4;   /* rgb(244,244,244) */
  --color-bg-light-3:     #EBEBEB;   /* rgb(235,235,235) */

  /* Foreground / Text */
  --color-fg-on-dark:     #EAE9E9;   /* rgb(234,233,233) — primary text on dark */
  --color-fg-on-light:    #292828;   /* rgb(41,40,40)    — primary text on light */
  --color-fg-muted:       #828282;   /* rgb(130,130,130) — secondary text */
  --color-fg-disabled:    #C4C4C4;   /* rgb(196,196,196) */
  --color-fg-faint:       #7B7E7E;   /* rgb(123,126,126) */

  /* Borders & Dividers */
  --color-border:         #C4C4C4;   /* rgb(196,196,196) */
  --color-border-dark:    #393939;   /* rgb(57,57,57) */
  --color-divider:        #EAE9E9;

  /* Status — Online / Success */
  --color-status-green:   #27AE60;   /* rgb(39,174,96)   — status dot */
  --color-status-green-2: #00D058;   /* rgb(0,208,88)    — bright online */

  /* Status — Error / Alarm */
  --color-status-red:     #FF0000;   /* rgb(255,0,0)     — critical alarm */
  --color-status-red-2:   #E24F4F;   /* rgb(226,79,79)   — softer error */

  /* Status — Warning */
  --color-status-amber:   #F3BD53;   /* rgb(243,189,83)  — warning */
  --color-status-amber-2: #F4BC3C;   /* rgb(244,188,60)  — alert */

  /* Status — Info / Analytics */
  --color-status-purple:  #BB6BD9;   /* rgb(187,107,217) — PPE/badge */
  --color-status-orange:  #F2994A;   /* rgb(242,153,74)  — alert accent */

  /* Camera / Video */
  --color-video-bg:       #000000;   /* camera tile background */
  --color-no-signal:      #292828;   /* no-signal state */

  /* ---------------------------------------------------------
     SEMANTIC COLOR ALIASES
     --------------------------------------------------------- */
  --bg-app:               var(--color-bg-dark);
  --bg-sidebar:           var(--color-bg-deepest);
  --bg-header:            var(--color-bg-white);
  --bg-card:              var(--color-bg-surface);
  --bg-input:             var(--color-bg-surface);
  --bg-input-light:       var(--color-bg-white);

  --text-primary:         var(--color-fg-on-dark);
  --text-secondary:       var(--color-fg-muted);
  --text-on-primary:      var(--color-bg-white);
  --text-on-light:        var(--color-fg-on-light);

  --accent:               var(--color-primary);
  --accent-hover:         var(--color-primary-dark);

  --status-online:        var(--color-status-green);
  --status-offline:       var(--color-status-red-2);
  --status-warning:       var(--color-status-amber);

  --border-default:       var(--color-border);
  --border-dark:          var(--color-border-dark);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */

  /* Font Families */
  --font-primary:         'Roboto', system-ui, sans-serif;
  --font-accent:          'Montserrat', 'Roboto', sans-serif;

  /* Font Weights */
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  /* Type Scale */
  --text-xs:              12px;   /* micro labels, badges */
  --text-sm:              14px;   /* body, nav items, table cells */
  --text-base:            16px;   /* labels, form fields */
  --text-lg:              18px;   /* card titles, button text */
  --text-xl:              20px;   /* sub-headings */
  --text-2xl:             24px;   /* section headers */
  --text-3xl:             32px;   /* page titles */

  /* Line Heights */
  --lh-tight:             100%;   /* 1.0 — used throughout UI */
  --lh-normal:            1.4;
  --lh-loose:             1.6;

  /* Letter Spacing */
  --ls-tight:             -0.01em;
  --ls-normal:            0em;

  /* ---------------------------------------------------------
     SPACING
     --------------------------------------------------------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;

  /* Layout Constants */
  --sidebar-width:        340px;
  --header-height:        64px;
  --content-offset-left:  372px;  /* sidebar + gap */

  /* ---------------------------------------------------------
     BORDER RADIUS
     --------------------------------------------------------- */
  --radius-sm:     4px;    /* inputs, camera chips, small buttons */
  --radius-md:     8px;    /* mini buttons, toggles */
  --radius-lg:     12px;   /* primary buttons, large cards */
  --radius-full:   9999px; /* pills, badges */
  --radius-circle: 50%;    /* avatars */

  /* ---------------------------------------------------------
     SHADOWS
     --------------------------------------------------------- */
  --shadow-sm:    0px 4px 4px 0px rgba(0,0,0,0.25);
  --shadow-md:    0px 4px 8px 0px rgba(0,0,0,0.3);
  --shadow-none:  none;

  /* ---------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
}

/* ---------------------------------------------------------
   SEMANTIC TYPE CLASSES
   --------------------------------------------------------- */

.h1 {
  font-family: var(--font-accent);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-fg-on-dark);
}

.h2 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-fg-on-dark);
}

.h3 {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-fg-on-dark);
}

.body {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-fg-on-dark);
}

.label {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-fg-on-light);
}

.caption {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-fg-muted);
}

.btn-text {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-bg-white);
}

.nav-item {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-fg-on-dark);
}

.status-text {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}