/* =========================================
   TIEKTA Design Tokens
   Color System v1.0
========================================= */

:root {

  /* =========================
     Base
  ========================== */

  --color-stroke: #DAE1ED;


  /* =========================
     Surface
  ========================== */

  --color-surface-primary:   #FFFFFF;
  --color-surface-secondary: #F5F6FA;
  --color-surface-tertiary:  #EEF1F9;


  /* =========================
     Content (Text)
  ========================== */

  --color-content-primary:   #2B2B3A;
  --color-content-secondary: #40404D;
  --color-content-inverted:  #000000;


  /* =========================
     Accent
  ========================== */

  --color-accent-primary: #FED110;


  /* =========================
     Support
  ========================== */

  --color-support-blue: #4A90E2;



  /* =========================================
     Optional Semantic Aliases (UI-ready)
     Можно удалить, если не нужно
  ========================================== */

  --background-default: var(--color-surface-primary);
  --background-muted:   var(--color-surface-secondary);
  --background-subtle:  var(--color-surface-tertiary);

  --text-primary:   var(--color-content-primary);
  --text-secondary: var(--color-content-secondary);
  --text-inverted:  var(--color-content-inverted);

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

  --brand-primary: var(--color-accent-primary);
  --link-color:    var(--color-support-blue);
}





/* =========================================
   Background
========================================= */

.bg-default {
  background-color: var(--background-default);
}

.bg-muted {
  background-color: var(--background-muted);
}

.bg-subtle {
  background-color: var(--background-subtle);
}

.bg-primary {
  background: var(--color-content-primary);
}

.bg-dark {
  background: var(--color-content-secondary);
}

/* =========================================
   Text
========================================= */
.text-primary-surface-secondary {
  color: var(--color-surface-secondary) !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-inverted {
  color: var(--text-inverted) !important;
}

.text-tertiary {
   color: var(--color-surface-tertiary) !important;
}

/* =========================================
   Border
========================================= */

.border-default {
  border: 1px solid var(--border-default);
}

.border-top-default {
  border-top: 1px solid var(--border-default);
}

.border-bottom-default {
  border-bottom: 1px solid var(--border-default);
}


/* =========================================
   Brand / Accent
========================================= */

.bg-brand {
  background-color: var(--brand-primary);
}

.text-brand {
  color: var(--brand-primary);
}

.border-brand {
  border: 1px solid var(--brand-primary);
}


/* =========================================
   Link
========================================= */

.link {
  color: var(--link-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.link:hover {
  opacity: 0.8;
}