/* ============================================================
   ТЕНДЕРГРАД — Colors & Type
   ------------------------------------------------------------
   Sapphire-crystal identity.
   The logomark is rendered as four faceted gemstone fragments —
   the system mirrors that: a single deep-sapphire hue at several
   value steps, a cool platinum accent (no gold — it clashes with
   the sapphire), and a cool-paper background.
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* Jost — open-source geometric sans in the Futura tradition.
   Excellent Cyrillic, weights 400–900. Used for both display
   (heavy uppercase, mirrors the wordmark) and body/UI.
   JetBrains Mono — numerics, lot ids, requisites.

   If the company licenses Futura PT (the apparent wordmark
   source), add a local @font-face and put 'Futura PT' first
   in --font-display / --font-sans below. */

:root {
  /* ============================================================
     COLOR — SAPPHIRE CORE
     A single hue at six value steps. Always read as one crystal.
     ============================================================ */
  --sapphire-100: #E8EAF6;   /* tint — chip backgrounds, table stripes */
  --sapphire-200: #C5C9E8;   /* hairline-friendly tint */
  --sapphire-300: #8B91D2;   /* secondary tint, decorative */
  --sapphire-500: #3A40B8;   /* mid — highlights, hover edges */
  --sapphire-700: #1B2185;   /* PRIMARY brand — wordmark core */
  --sapphire-900: #0B1052;   /* deepest — text, deep surface */
  --sapphire-950: #050828;   /* near-black — ink, footer */

  /* Legacy-friendly aliases */
  --brand:        var(--sapphire-700);
  --brand-deep:   var(--sapphire-900);
  --brand-soft:   var(--sapphire-500);
  --brand-pale:   var(--sapphire-100);

  /* ============================================================
     COLOR — PLATINUM ACCENT
     Cool counterpart to the sapphire. Replaces "gold" entirely.
     Used sparingly — once or twice per screen, never for surfaces.
     ============================================================ */
  --platinum:      #C9CDE3;  /* surface accent — chips, pills */
  --platinum-warm: #B0B5D4;  /* hover */
  --platinum-pale: #E6E8F2;  /* very pale tint */

  /* ============================================================
     COLOR — COOL NEUTRALS
     Paper has shifted from warm ivory to cool ice-white.
     ============================================================ */
  --paper:        #F2F4FA;       /* page bg — cool off-white */
  --paper-2:      #E8EAF4;       /* sunken */
  --paper-3:      #DCDFEE;       /* deeper sunken / hairline-rich */
  --ink:          #050828;       /* primary text */
  --ink-2:        #1F2447;       /* secondary text */
  --ink-3:        #4F557B;       /* tertiary / meta */
  --ink-4:        #8A8FB0;       /* placeholder, disabled */
  --line:         #D4D7E6;       /* hairlines */
  --line-strong:  #A8ADC8;       /* strong dividers */
  --white:        #FFFFFF;
  --black:        #050828;

  /* ============================================================
     COLOR — SEMANTIC
     Tuned cool to harmonize with sapphire monochrome.
     ============================================================ */
  --ok:           #1F7A56;       /* success / registered */
  --ok-bg:        #DBEDE3;
  --warn:         #A66A1A;       /* deadline soon */
  --warn-bg:      #F4E3C6;
  --danger:       #A82E3B;       /* encumbrance, blocked */
  --danger-bg:    #F2D6DA;
  --info:         var(--sapphire-700);
  --info-bg:      var(--sapphire-100);

  /* "Discount" — auction-specific positive indicator,
     distinct from generic success. Cool teal. */
  --discount:     #136C66;
  --discount-bg:  #D2E8E5;

  /* ============================================================
     SEMANTIC — FG / BG / surfaces
     ============================================================ */
  --bg:           var(--paper);
  --bg-elevated:  var(--white);
  --bg-sunken:    var(--paper-2);
  --bg-inverse:   var(--sapphire-900);

  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-muted:     var(--ink-4);
  --fg-on-brand:  #EDEFF8;       /* text on sapphire surfaces */
  --fg-on-platinum: var(--sapphire-900);
  --fg-link:      var(--sapphire-700);
  --fg-accent:    var(--sapphire-500);

  --border:       var(--line);
  --border-strong:var(--line-strong);
  --border-focus: var(--sapphire-700);

  /* ============================================================
     SAPPHIRE GRADIENT
     The crystal's signature lighting — used VERY sparingly
     (hero photo overlay, single feature card, never on body bg).
     ============================================================ */
  --grad-sapphire: linear-gradient(135deg,
                     #4046C2 0%,
                     #1B2185 45%,
                     #0B1052 100%);
  --grad-sapphire-deep: linear-gradient(160deg,
                     #1B2185 0%,
                     #0B1052 60%,
                     #050828 100%);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  --font-display: "Futura PT", "Jost", "Futura", "Trebuchet MS", system-ui, sans-serif;
  --font-sans:    "Futura PT", "Jost", "Futura", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — SCALE
     ============================================================ */
  --fs-12:  0.75rem;
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-30:  1.875rem;
  --fs-40:  2.5rem;
  --fs-56:  3.5rem;
  --fs-80:  5rem;
  --fs-112: 7rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-caps:    0.08em;
  --ls-display: 0.005em;       /* slight tracking on display caps (Jost/Futura) */

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* The crystal aesthetic encourages slightly sharper corners
     than warm institutional brands — keeps the faceted feel. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows are cool-toned and slightly more present than before
     — the brand is glossy, so surfaces float a touch more. */
  --shadow-1: 0 1px 2px rgba(11, 16, 82, 0.06);
  --shadow-2: 0 2px 10px rgba(11, 16, 82, 0.08), 0 1px 2px rgba(11, 16, 82, 0.05);
  --shadow-3: 0 10px 28px rgba(11, 16, 82, 0.12), 0 2px 6px rgba(11, 16, 82, 0.06);
  --shadow-4: 0 20px 56px rgba(11, 16, 82, 0.18), 0 4px 14px rgba(11, 16, 82, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(11, 16, 82, 0.06);

  /* Focus ring — cool platinum on dark, sapphire on light */
  --ring:      0 0 0 3px rgba(58, 64, 184, 0.35);
  --ring-soft: 0 0 0 3px rgba(201, 205, 227, 0.55);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1.1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-80);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.t-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

.t-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-40);
  letter-spacing: var(--ls-tight);
  color: var(--sapphire-700);
  font-feature-settings: "tnum" 1;
}

a {
  color: var(--fg-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--sapphire-500); }

::selection {
  background: var(--sapphire-700);
  color: var(--fg-on-brand);
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}