/* ============================================================
   NIR PBX — Design System
   Based on design.gov.ua + NIR Brand Book extensions
   ============================================================ */

/* ProbaPro is the official gov.ua font; Open Sans as web fallback */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* ── Official design.gov.ua Colors ── */
  --color-text:             #1D1D1B;
  --color-text-secondary:   #6D727C;
  --color-border:           #C2C5CB;
  --color-bg-secondary:     #F5F7FA;
  --color-bg-primary:       #FFFFFF;

  /* ── Interactive Colors ── */
  --color-link:             #004BC1;
  --color-link-hover:       #234161;
  --color-link-visited:     #552C92;
  --color-accent:           #FFE358;
  --color-accent-hover:     #f5d63e;
  --color-theme:            #FFD500;

  /* ── NIR Brand Colors ── */
  --color-nir-primary:      #2d5ca6;
  --color-nir-dark:         #304d7c;

  /* ── Semantic Colors (gov.ua + a11y compliant) ── */
  --color-error:            #dc2626;
  --color-error-light:      #fff1f1;
  --color-error-dark:       #da1e28;
  --color-success:          #27ae60;
  --color-success-light:    #defbe6;
  --color-success-dark:     #0e6027;
  --color-success-hover:    #1e8449;
  --color-warning:          #FF991F;
  --color-warning-light:    #fff8e1;
  --color-info:             #004BC1;
  --color-busy:             #6929c4;
  --color-busy-light:       #e8daff;

  /* ── Focus (a11y: 3px ring, #0073e6) ── */
  --color-focus:            #0073e6;
  --focus-ring:             0 0 0 3px #0073e6;
  --focus-offset:           2px;

  /* ── Sidebar (gov.ua gradient) ── */
  --sidebar-bg:             linear-gradient(180deg, #1e3c72 0%, #224f91 50%, #004BC1 100%);
  --sidebar-bg-flat:        #1e3c72;
  --sidebar-text:           #FFFFFF;
  --sidebar-text-dim:       rgba(255,255,255,0.85);
  --sidebar-hover:          rgba(255,255,255,0.12);
  --sidebar-active:         rgba(255,255,255,0.2);

  /* ── Typography (ProbaPro → Open Sans fallback) ── */
  --font-family:            'ProbaPro', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:              'SF Mono', Consolas, 'Liberation Mono', monospace;
  --font-size-base:         16px;
  --font-size-small:        14px;
  --font-size-caption:      13px;
  --font-size-h1:           40px;
  --font-size-h2:           30px;
  --font-size-h3:           24px;
  --font-size-h4:           20px;
  --font-size-stat:         40px;
  --font-size-display:      24px;
  --font-weight-regular:    400;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --line-height:            1.5;
  --line-height-tight:      1.2;

  /* ── Border Radius (brand book) ── */
  --border-radius:          0;      /* inputs, buttons: sharp gov.ua */
  --border-radius-sm:       4px;    /* nav items, action buttons */
  --border-radius-md:       8px;    /* cards, modals, containers */
  --border-radius-pill:     100px;  /* status pills, tags, badges */

  /* ── Shadows (brand book) ── */
  --shadow-sm:              0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:              0 4px 15px rgba(30,60,114,0.15);
  --shadow-lg:              0 15px 30px rgba(0,0,0,0.15);
  --shadow-modal:           0 25px 50px rgba(0,0,0,0.3);

  /* ── Spacing ── */
  --space-xs:               4px;
  --space-sm:               8px;
  --space-md:               16px;
  --space-lg:               24px;
  --space-xl:               32px;
  --space-xxl:              48px;
  --space-section:          100px;

  /* ── Transitions ── */
  --transition-fast:        0.15s ease;
  --transition-normal:      0.2s ease;
  --transition-slow:        0.3s ease;

  /* ── Layout ── */
  --sidebar-width:          260px;
  --input-height:           48px;
  --button-height:          48px;
  --button-height-sm:       36px;

  /* ── Aliases (JS compatibility) ── */
  --color-primary:          var(--color-link);
  --color-bg:               var(--color-bg-primary);
  --cta:                    var(--color-accent);
  --accent:                 var(--color-link);
  --text:                   var(--color-text);
  --text-dim:               var(--color-text-secondary);
  --border:                 var(--color-border);
  --bg:                     var(--color-bg-secondary);
  --green:                  var(--color-success);
  --radius:                 var(--border-radius);
  --radius-lg:              var(--border-radius-md);
  --bg-card:                var(--color-bg-primary);
  --bg-hover:               var(--color-bg-secondary);
}