/* ============================================================
   ТехноСистемСервис Design System — Colors & Typography
   Source: Figma file Tss-kazan.fig
   ============================================================ */

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

/* ── Base Color Palette ─────────────────────────────────── */
:root {
  /* Brand Teal */
  --color-teal:         #007285;  /* rgb(0,114,133)   — primary brand */
  --color-teal-dark:    #086676;  /* rgb(8,102,118)   — hover state */
  --color-teal-deeper:  #016879;  /* rgb(1,104,121)   — button variant */
  --color-teal-deep:    #0A4D5E;  /* rgb(10,77,94)    — logo teal */

  /* Brand Crimson */
  --color-crimson:      #8E2839;  /* rgb(142,40,57)   — accent / attention */
  --color-crimson-dark: #903542;  /* rgb(144,53,66)   — crimson hover */

  /* Neutrals */
  --color-black:        #000000;
  --color-near-black:   #141414;  /* rgb(20,20,20)    — primary text */
  --color-dark:         #161616;  /* rgb(22,22,22) */
  --color-gray-dark:    #666666;  /* rgb(102,102,102) */
  --color-gray-mid:     #A3A5A8;  /* rgb(163,165,168) */
  --color-gray:         #C5C6C6;  /* rgb(197,198,198) — borders, dividers */
  --color-gray-light:   #CDCED0;  /* rgb(205,206,208) — subtle fills */
  --color-bg:           #F1F1F1;  /* rgb(241,241,241) — page background */
  --color-bg-warm:      #F1F0EE;  /* rgb(241,240,238) — warm off-white */
  --color-white:        #FFFFFF;

  /* Semantic */
  --color-surface:          var(--color-white);
  --color-surface-alt:      var(--color-bg);
  --color-surface-dark:     var(--color-near-black);
  --color-text-primary:     var(--color-near-black);
  --color-text-secondary:   var(--color-gray-dark);
  --color-text-muted:       var(--color-gray-mid);
  --color-text-inverse:     var(--color-white);
  --color-text-accent:      var(--color-teal);
  --color-text-emphasis:    var(--color-crimson);
  --color-border:           var(--color-gray);
  --color-border-subtle:    rgba(0,0,0,0.1);
  --color-border-dark:      rgba(255,255,255,0.1);
  --color-interactive:      var(--color-teal);
  --color-interactive-hover:var(--color-teal-dark);
  --color-cta:              var(--color-crimson);
  --color-icon-bg:          var(--color-teal);

  /* ── Typography ─────────────────────────────────────── */

  /* Font families */
  --font-heading:  'Onest', sans-serif;
  --font-body:     'Exo 2', sans-serif;
  --font-utility:  'Roboto', sans-serif;

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

  /* Type scale — desktop */
  --text-h1:       42px;
  --text-h2:       32px;
  --text-h3:       24px;
  --text-h4:       20px;
  --text-body-lg:  20px;
  --text-body:     18px;
  --text-body-sm:  16px;
  --text-caption:  14px;
  --text-tiny:     12px;

  /* Line heights */
  --lh-tight:      1.2;
  --lh-snug:       1.4;
  --lh-normal:     1.5;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-xs:      8px;
  --space-sm:      16px;
  --space-md:      24px;
  --space-lg:      32px;
  --space-xl:      40px;
  --space-2xl:     64px;
  --space-3xl:     80px;
  --space-4xl:     112px;

  /* Layout */
  --layout-max-width:   1440px;
  --layout-content:     1312px;
  --layout-padding-h:   64px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm:     10px;   /* navbar contact button */
  --radius-md:     20px;   /* cards, images, icon containers */
  --radius-pill:   25px;   /* primary CTA button */
  --radius-full:   50%;    /* arrow circles */

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-subtle:  0 1px 4px rgba(0,0,0,0.1);
  --shadow-border:  0 0 0 1px rgba(0,0,0,0.1);
}

/* ── Semantic Type Styles ────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

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

.body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-normal);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

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

.label {
  font-family: var(--font-utility);
  font-weight: var(--fw-bold);
  font-size: var(--text-body-sm);
  line-height: var(--lh-normal);
}

code, .mono {
  font-family: var(--font-utility);
  font-weight: var(--fw-regular);
  font-size: var(--text-body-sm);
}