/* ================================================================
   Гипотенуза — Brand Tokens
   Generated: 2026-04-12 by /brandbook
   Direction: B — Диагностический комплекс

   Usage:
     @import "brandbook/brand-tokens.css";

   Tailwind v4 compatibility:
     These live in @theme — automatically available as utilities.
     e.g. bg-void, text-bone, border-hairline, shadow-signal-glow

   Primary color model: OKLCH (perceptually uniform, CSS Color 4)
   HEX values in comments are for eyeballing only — OKLCH is SSoT.
   ================================================================ */

@theme {

  /* ========================================================
     1. COLOR PRIMITIVES — raw palette
     ======================================================== */

  /* Surfaces — cold achromatic ladder, dark mode primary */
  --color-void:        oklch(0.09 0.003 240);  /* #050607 */
  --color-surface-1:   oklch(0.17 0.004 220);  /* #0E1213 */
  --color-surface-2:   oklch(0.23 0.004 220);  /* #181C1E */
  --color-surface-3:   oklch(0.29 0.005 220);  /* #242A2D */
  --color-hairline:    oklch(0.35 0.006 220);  /* #2E3438 */
  --color-hairline-hot: oklch(0.42 0.007 220); /* #3A4247 */

  /* Text — warm/cold split */
  --color-bone:        oklch(0.91 0.020 85);   /* #EDE4D4 — headlines only */
  --color-cold-white:  oklch(0.92 0.003 220);  /* #E4E8EA — body */
  --color-muted:       oklch(0.64 0.008 220);  /* #8A9499 — secondary */
  --color-ghost:       oklch(0.44 0.009 220);  /* #545C60 — placeholder/disabled */

  /* Signal — phosphor green CRT accent */
  --color-signal:      oklch(0.91 0.24 155);   /* #3CFF9E */
  --color-signal-dim:  oklch(0.70 0.18 155);   /* #1FB873 */
  --color-signal-ink:  oklch(0.55 0.18 155);   /* #0E8A48 — light-mode variant */

  /* Zones — diagnostic verdict */
  --color-zone-ok:     oklch(0.91 0.24 155);   /* = signal */
  --color-zone-amber:  oklch(0.81 0.15 78);    /* #F5B84B */
  --color-zone-red:    oklch(0.70 0.22 20);    /* #FF5C6B */

  /* Light-mode surface (document mode only) */
  --color-paper:       oklch(0.95 0.018 90);   /* #F5F2E8 */
  --color-paper-2:     oklch(0.91 0.025 88);   /* #EAE5D6 */
  --color-ink:         oklch(0.11 0.003 240);  /* #0A0C0D */
  --color-ink-muted:   oklch(0.42 0.008 220);  /* #4A5256 */


  /* ========================================================
     2. SEMANTIC TOKENS — what primitives map to
     ======================================================== */

  /* Surfaces */
  --color-bg:            var(--color-void);
  --color-bg-elevated:   var(--color-surface-1);
  --color-bg-raised:     var(--color-surface-2);
  --color-bg-pressed:    var(--color-surface-3);
  --color-border:        var(--color-hairline);
  --color-border-strong: var(--color-hairline-hot);

  /* Text */
  --color-heading:       var(--color-bone);
  --color-text:          var(--color-cold-white);
  --color-text-muted:    var(--color-muted);
  --color-text-ghost:    var(--color-ghost);

  /* Actions */
  --color-cta:           var(--color-signal);
  --color-cta-hover:     var(--color-signal-dim);
  --color-cta-text:      var(--color-void);
  --color-link:          var(--color-signal);
  --color-focus:         var(--color-signal);

  /* Diagnostic zones (ONLY inside report contexts) */
  --color-verdict-ok:    var(--color-zone-ok);
  --color-verdict-warn:  var(--color-zone-amber);
  --color-verdict-crit:  var(--color-zone-red);

  /* UI semantic state (reuse zones, different context) */
  --color-success:       var(--color-signal);
  --color-warning:       var(--color-zone-amber);
  --color-error:         var(--color-zone-red);
  --color-info:          var(--color-muted);


  /* ========================================================
     3. TYPOGRAPHY
     ======================================================== */

  /* Font families */
  --font-display:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", "Menlo", "Monaco", "Courier New", monospace;
  --font-condensed:  "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;

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

  /* Type scale — modular 1.25, dense data UI */
  --text-display: 4.5rem;   /* 72px — hero, landing */
  --text-h1:      3rem;     /* 48px — page titles */
  --text-h2:      2rem;     /* 32px — section headers */
  --text-h3:      1.375rem; /* 22px — sub-sections */
  --text-lead:    1.125rem; /* 18px — intro paragraphs */
  --text-body:    0.9375rem;/* 15px — main text */
  --text-small:   0.75rem;  /* 12px — captions */
  --text-mono-lg: 0.9375rem;/* 15px mono */
  --text-mono:    0.8125rem;/* 13px mono — reports */
  --text-mono-sm: 0.6875rem;/* 11px mono — section labels */

  /* Line heights */
  --leading-display: 1.0;
  --leading-h1:      1.08;
  --leading-h2:      1.15;
  --leading-h3:      1.3;
  --leading-body:    1.55;
  --leading-caption: 1.4;

  /* Letter spacing */
  --tracking-display:  -0.04em;
  --tracking-h1:       -0.03em;
  --tracking-h2:       -0.02em;
  --tracking-h3:       -0.01em;
  --tracking-normal:    0;
  --tracking-mono:     -0.01em;
  --tracking-caps:      0.12em;

  /* OpenType feature settings — mandatory for all text */
  --font-features: "ss01", "ss02", "tnum", "calt";


  /* ========================================================
     4. SPACING — 4px base grid
     ======================================================== */

  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */


  /* ========================================================
     5. RADIUS — direction B bans rounded-everything
     ======================================================== */

  --radius-none:   0;           /* default — sharp corners */
  --radius-sm:     2px;         /* pills, status badges */
  --radius-md:     2px;         /* identical — we don't need variety */
  --radius-full:   9999px;      /* only for avatars in Telegram contexts */


  /* ========================================================
     6. BORDERS — hairline everywhere, no shadows
     ======================================================== */

  --border-hairline:     1px solid var(--color-hairline);
  --border-hairline-hot: 1px solid var(--color-hairline-hot);
  --border-focus:        2px solid var(--color-signal);


  /* ========================================================
     7. SHADOWS — signal-glow only, no drop-shadows
     ======================================================== */

  /* Drop shadows are BANNED in UI chrome. Use surface color ladder for elevation. */
  /* The only allowed "shadow" is the phosphor glow around signal elements. */

  --glow-signal-sm: 0 0 8px  oklch(0.91 0.24 155 / 0.3);
  --glow-signal-md: 0 0 14px oklch(0.91 0.24 155 / 0.45);
  --glow-signal-lg: 0 0 28px oklch(0.91 0.24 155 / 0.25);
  --glow-signal-xl: 0 0 40px oklch(0.91 0.24 155 / 0.4);

  /* Focus ring glow */
  --glow-focus: 0 0 0 4px oklch(0.91 0.24 155 / 0.2);


  /* ========================================================
     8. MOTION
     ======================================================== */

  /* Durations */
  --motion-duration-instant:  100ms;
  --motion-duration-fast:     200ms;
  --motion-duration-normal:   300ms;
  --motion-duration-slow:     500ms;
  --motion-duration-intro:    1600ms;
  --motion-duration-phosphor: 1600ms;

  /* Easings — Sage archetype: subtle, never bouncy */
  --motion-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in:       cubic-bezier(0.64, 0, 0.78, 0);
  --motion-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --motion-ease-phosphor: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-linear:   linear;

  /* Stagger */
  --motion-stagger-delay: 40ms;
  --motion-stagger-max:   5;


  /* ========================================================
     9. Z-INDEX LAYERS
     ======================================================== */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
  --z-max:      999;
}


/* ================================================================
   BASE STYLES — apply to root
   ================================================================ */

:root {
  color-scheme: dark light;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: var(--font-features);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--font-weight-semibold); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono);
}

:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  box-shadow: var(--glow-focus);
  transition:
    outline-offset var(--motion-duration-instant) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}


/* ================================================================
   LIGHT MODE — only for documents / PDF / landing print
   Triggered by explicit [data-theme="light"], NOT by system pref.
   Dark mode is the primary experience always.
   ================================================================ */

[data-theme="light"] {
  --color-bg:            var(--color-paper);
  --color-bg-elevated:   var(--color-paper-2);
  --color-heading:       var(--color-ink);
  --color-text:          var(--color-ink);
  --color-text-muted:    var(--color-ink-muted);
  --color-cta:           var(--color-signal-ink);
  --color-cta-text:      var(--color-paper);
  --color-link:          var(--color-signal-ink);
}


/* ================================================================
   REDUCED MOTION — accessibility
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   PHOSPHOR PULSE — reusable keyframe for signal-dot
   ================================================================ */

@keyframes phosphor-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: var(--glow-signal-md), var(--glow-signal-lg);
  }
  50% {
    opacity: 0.45;
    box-shadow: var(--glow-signal-sm);
  }
}

.phosphor {
  animation: phosphor-pulse var(--motion-duration-phosphor) var(--motion-ease-phosphor) infinite;
}


/* ================================================================
   SCAN LINE — for "scanning in progress" UI
   ================================================================ */

@keyframes scan-line {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.scanning {
  position: relative;
  overflow: hidden;
}

.scanning::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-signal-dim);
  box-shadow: var(--glow-signal-sm);
  animation: scan-line 1800ms linear infinite;
  pointer-events: none;
}