/* НормПоиск — Design System Foundations
   Mirrors app/static/css/styles.css from the normdocs repo.
   Use these variables verbatim in prototypes and production. */

/* IBM Plex Sans — brand font, self-hosted (see fonts/).
   Variants loaded: 300 / 400 / 500 / 600 / 700 + matching italics.
   The family also has Condensed and SemiCondensed widths available
   under 'IBM Plex Sans Condensed' / 'IBM Plex Sans SemiCondensed'
   — see bottom of this file for their @font-face rules. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-Italic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans-BoldItalic.ttf') format('truetype'); }

/* IBM Plex Mono — monospace for normative codes and clause numbers.
   Self-hosted; only the weights actually referenced by the design
   (400 regular, 500 medium) are loaded. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); }

/* ═══════════════════════════════════════════════════════
   COLOR TOKENS — LIGHT THEME (default)
   Warm paper-beige surface, ink navy, info blue accent.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Surface ladder — beige paper, not cold grey */
  --bg:           #f5f3ef;  /* page background, warm paper */
  --bg-2:         #eeece7;  /* subtle depression, hover tint */
  --surface:      #ffffff;  /* cards, search box */
  --surface-2:    #faf9f7;  /* sidebar, section headers */

  /* Borders & rules */
  --border:       #e0dcd4;
  --border-dark:  #c8c3ba;
  --rule-color:   #d4cfc7;

  /* Brand / accent */
  --accent:       #0B2545;  /* ink navy — primary action, logo block */
  --accent-mid:   #1a4a7a;  /* hover for accent */
  --accent-light: #2D7DD2;  /* info blue — links, active nav, codes */
  --accent-pale:  #e8f0fa;  /* tint for active rows */
  --tag-bg:       #edf3fb;  /* tag/chip background */

  /* Text ladder */
  --text-primary:   #1a1814;  /* body, titles — warm near-black */
  --text-secondary: #5a544a;  /* secondary prose */
  --text-muted:     #9a9088;  /* captions, mono labels */

  /* Semantic */
  --success:    #166534;
  --success-bg: #dcfce7;

  /* Semantic — error / warning / info */
  --error:        #dc2626;
  --error-bg:     #fef2f2;
  --error-text:   #991b1b;

  --warning:      #f59e0b;
  --warning-bg:   #fff8e1;
  --warning-text: #92400e;

  --info:         #2D7DD2;
  --info-bg:      #fffbeb;
  --info-text:    #5a544a;

  /* Shape + elevation */
  --radius:    9px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);

  /* Layout */
  --nav-h:     52px;
  --sidebar-w: 240px;
  --panel-w:   400px;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY — BASE TOKENS
   IBM Plex Sans for prose + UI, JetBrains Mono for codes.
   ═══════════════════════════════════════════════════════ */
:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
  --font-display: 'IBM Plex Sans', sans-serif;
  /* Alternate widths — same family, narrower. Swap --font-sans to one
     of these for compact table rows or data-dense admin screens. */
  --font-sans-condensed:     'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --font-sans-semicondensed: 'IBM Plex Sans SemiCondensed', 'IBM Plex Sans', sans-serif;

  /* Weight scale */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Size scale */
  --fs-9:   9.5px;   /* micro mono labels */
  --fs-10:  10.5px;  /* footer mono */
  --fs-11:  11.5px;  /* chips, source cards */
  --fs-12:  12px;    /* sidebar items */
  --fs-13:  13px;    /* table body, panel text */
  --fs-14:  14px;    /* base UI body, ai-answer */
  --fs-17:  17px;    /* doc section title */
  --fs-22:  22px;    /* doc title */
  --fs-26:  26px;    /* library page title */
  --fs-52:  52px;    /* home hero */
}

/* ═══════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
   Apply via class; keep raw CSS vars for ad-hoc overrides.
   ═══════════════════════════════════════════════════════ */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-52);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: -1.5px;
  line-height: 1;
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-26);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.4;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  line-height: 1.75;
}

.t-body-ui {
  /* UI controls use 400, not 300 — prose reads light, UI reads regular */
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  line-height: 1.5;
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  line-height: 1.4;
}

.t-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Monospace — the signal that something is a normative reference.
   Used for document codes, clause numbers, table values. */
.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--accent-light);
}

.t-code-lg {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--accent-light);
}

/* Link style — inline references inside AI answers */
.t-link {
  color: var(--accent-light);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-light);
  transition: border-bottom-style 0.1s;
}
.t-link:hover { border-bottom-style: solid; }

/* ═══════════════════════════════════════════════════════
   ALTERNATE WIDTHS — IBM Plex Sans Condensed + SemiCondensed
   Same visual DNA as the regular width, just narrower. Handy
   for dense tables, admin rows, or sidebar metadata where the
   regular width wraps awkwardly. Opt-in via --font-sans-condensed
   or --font-sans-semicondensed.
   ═══════════════════════════════════════════════════════ */
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 200; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: italic;  font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans_Condensed-BoldItalic.ttf') format('truetype'); }

@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 200; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 300; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans SemiCondensed'; font-style: italic;  font-weight: 700; font-display: swap; src: url('../fonts/IBMPlexSans_SemiCondensed-BoldItalic.ttf') format('truetype'); }