/* Bundled design tokens. Keep order aligned with styles.css imports. */

/* fonts.css */
/* shoostro webfonts
   Brandbook specifies Manrope (display) + Inter (body/UI).
   No font binaries were provided — loading from Google Fonts as the
   nearest (exact-family) match. Replace with self-hosted @font-face
   rules if licensed binaries become available. */


/* colors.css */
/* shoostro — color system (Brandbook 2025, p.04) */
:root {
  /* Base palette */
  --graphite-black: #090B11; /* Глубокий чёрный. Основной фон */
  --deep-charcoal:  #1A1D22; /* Поверхности, карточки, панели */
  --steel-graphite: #2A2E35; /* Разделители, вторичные элементы */
  --signal-orange:  #FF8A00; /* Фирменный акцент. Ключевые действия */
  --warm-amber:     #FFB347; /* Тёплый акцент. Градиенты, свечения */
  --ice-silver:     #D6DBE2; /* Светлый акцент. Текст, иконки, границы */
  --steel-blue:     #9CB7C7; /* Холодный поддерживающий тон. Графики */
  --signal-green:   #34D17A; /* Вторичный акцент. Данные, аналитика, «после внедрения», успех */
  --signal-green-bright: #4ADE80; /* Яркий зелёный для контрастных «после»-состояний */
  --signal-red:     #F0473E; /* Ошибки, отклонено, «до внедрения» (проблема) */
  --signal-blue:    #4D9FEC; /* Информация, статус «новый» */

  /* Semantic — surfaces */
  --bg-base:        var(--graphite-black);
  --surface-card:   var(--deep-charcoal);
  --surface-raised: var(--steel-graphite);
  --surface-accent: var(--signal-orange);

  /* Semantic — text */
  --text-primary:   #FFFFFF;
  --text-secondary: var(--ice-silver);
  --text-muted:     rgba(214, 219, 226, 0.62);
  --text-on-accent: var(--graphite-black);
  --text-accent:    var(--signal-orange);

  /* Semantic — lines */
  --border-subtle:  rgba(214, 219, 226, 0.12);
  --border-strong:  rgba(214, 219, 226, 0.24);
  --border-accent:  rgba(255, 138, 0, 0.55);

  /* Semantic — status (бейджи, alert, toast, состояния) */
  --status-success:        #34D17A;
  --status-success-bg:     rgba(52, 209, 122, 0.10);
  --status-success-border: rgba(52, 209, 122, 0.34);
  --status-error:          #F0473E;
  --status-error-bg:       rgba(240, 71, 62, 0.10);
  --status-error-border:   rgba(240, 71, 62, 0.34);
  --status-warning:        #FFB347;
  --status-warning-bg:     rgba(255, 179, 71, 0.10);
  --status-warning-border: rgba(255, 179, 71, 0.32);
  --status-info:           #4D9FEC;
  --status-info-bg:        rgba(77, 159, 236, 0.10);
  --status-info-border:    rgba(77, 159, 236, 0.32);
  --status-accent:         #FF8A00; /* «в работе» / активный процесс */
  --status-accent-bg:      rgba(255, 138, 0, 0.10);
  --status-accent-border:  rgba(255, 138, 0, 0.34);
  --status-neutral:        #9CB7C7;
  --status-neutral-bg:     rgba(156, 183, 199, 0.10);
  --status-neutral-border: rgba(156, 183, 199, 0.28);

  /* Gradients */
  --gradient-accent: linear-gradient(90deg, #FF8A00 0%, #FFB347 100%); /* @kind color */
  --gradient-tech:   linear-gradient(90deg, #FF8A00 0%, #FFB347 52%, #9CB7C7 100%); /* @kind color */
  --gradient-data:   linear-gradient(90deg, #34D17A 0%, #4ADE80 100%); /* @kind color */ /* данные/успех */

  /* Glow (imagery/accents only — never on the logo) */
  --glow-accent:      0 0 24px rgba(255, 138, 0, 0.35);
  --glow-accent-soft: 0 0 48px rgba(255, 138, 0, 0.18);
  --glow-green:       0 0 24px rgba(52, 209, 122, 0.32);
}


/* typography.css */
/* shoostro — typography system (Brandbook 2025, p.05) */
:root {
  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif; /* Заголовки и акценты */
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;   /* Основной текст и интерфейс */

  /* Scale: size / line-height */
  --text-h1-size: 72px;  --text-h1-line: 80px;  --text-h1-weight: 700; /* Manrope Bold */
  --text-h2-size: 40px;  --text-h2-line: 48px;  --text-h2-weight: 600; /* Manrope Semibold */
  --text-h3-size: 24px;  --text-h3-line: 32px;  --text-h3-weight: 600; /* Manrope Semibold */
  --text-body-size: 16px; --text-body-line: 24px;                      /* Inter Regular */
  --text-caption-size: 12px; --text-caption-line: 16px;                /* Inter Regular */
  --text-numbers-size: 32px; --text-numbers-line: 40px;                /* Manrope Semibold */

  /* Eyebrow / overline labels (ОСНОВНОЙ ШРИФТ, ПРЕЗЕНТАЦИЯ …) */
  --text-label-size: 12px;
  --text-label-tracking: 0.16em;
}


/* spacing.css */
/* shoostro — spacing, radii, layout (Brandbook 2025, p.05) */
:root {
  /* Spacing scale: 8 / 16 / 24 / 32 / 48 / 64 / 96 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Corner radii */
  --radius-sm: 8px;   /* tags, chips, small controls */
  --radius-md: 12px;  /* buttons, inputs */
  --radius-lg: 16px;  /* cards */
  --radius-xl: 24px;  /* large panels, slide blocks */

  /* Layout grid: 12 columns */
  --layout-max: 1280px;
  --layout-margin: 64px;
  --grid-gutter: 24px;
}


/* effects.css */
/* shoostro — motion, focus, base element styles */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 250ms; /* @kind other */

  --focus-ring: 0 0 0 2px rgba(255, 138, 0, 0.6);
}

/* Base — calm dark canvas */
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}

/* Type utility classes mirroring the brandbook hierarchy */
.lc-h1 { font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: -0.01em; margin: 0; }
.lc-h2 { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: -0.005em; margin: 0; }
.lc-h3 { font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); margin: 0; }
.lc-body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 400; margin: 0; }
.lc-caption { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 400; margin: 0; }
.lc-numbers { font-family: var(--font-display); font-size: var(--text-numbers-size); line-height: var(--text-numbers-line); font-weight: 600; margin: 0; }
.lc-label { font-family: var(--font-body); font-size: var(--text-label-size); letter-spacing: var(--text-label-tracking); text-transform: uppercase; font-weight: 500; color: var(--text-muted); margin: 0; }