/* ============================================================
   FOM — Colors
   Source: FOM brandbook §5.1 "Основная палитра"
   Corporate palette: Red, Black, Grey, White.
   Red is the corporate hero color. Green is a functional status
   color only (success) — it is NOT part of the brand palette.
   ============================================================ */

:root {
  /* ---- Brand primitives (exact brandbook values) ---- */
  --fom-red: #EE3831;          /* PANTONE 3556 C · corporate red */
  --fom-black: #101820;        /* PANTONE Black 6 C */
  --fom-grey: #53565A;         /* PANTONE Cool Gray 11 C */
  --fom-white: #FFFFFF;

  /* ---- Functional green (success status only — not a brand color) ---- */
  --green-500: #13B35E;

  /* ---- Red ramp (derived around #EE3831 for states/tints) ---- */
  --red-700: #B81E18;          /* pressed / deep */
  --red-600: #D62820;          /* hover */
  --red-500: #EE3831;          /* base — corporate red */
  --red-400: #F3635D;
  --red-300: #F89691;
  --red-200: #FBC4C1;
  --red-100: #FDE3E1;
  --red-50:  #FEF2F1;          /* tint surface */

  /* ---- Neutral ramp (cool grey, anchored on #101820 / #53565A) ---- */
  --neutral-900: #101820;      /* near-black ink */
  --neutral-800: #1E2630;
  --neutral-700: #2D3641;
  --neutral-600: #424b56;
  --neutral-500: #53565A;      /* brand grey */
  --neutral-400: #767A80;
  --neutral-300: #A2A6AC;
  --neutral-200: #D2D5D9;
  --neutral-150: #E2E4E7;
  --neutral-100: #EEF0F2;
  --neutral-50:  #F6F7F8;
  --white: #FFFFFF;

  /* ---- Semantic: text ---- */
  --text-strong: var(--neutral-900);   /* headings, primary copy */
  --text-body: #2D3641;                 /* default running text */
  --text-muted: var(--neutral-500);     /* captions, section numbers */
  --text-subtle: var(--neutral-400);    /* placeholder, disabled label */
  --text-inverse: var(--white);         /* on red / on dark */
  --text-brand: var(--fom-red);         /* links, emphasis, urls */
  --text-on-red: var(--white);

  /* ---- Semantic: surface ---- */
  --surface-page: var(--white);
  --surface-subtle: var(--neutral-50);  /* mockup tile / app canvas */
  --surface-muted: var(--neutral-100);
  --surface-card: var(--white);
  --surface-inverse: var(--fom-black);
  --surface-brand: var(--fom-red);      /* hero / section blocks */
  --surface-brand-tint: var(--red-50);
  --surface-input: var(--white);        /* field/control backgrounds */
  --surface-disabled: var(--neutral-50);/* disabled field background */
  --surface-hover: var(--neutral-100);  /* row/item hover */
  --surface-hover-strong: var(--neutral-150); /* pressed / deeper hover */
  --surface-track: var(--neutral-150);  /* progress / slider track */
  --control-knob: var(--white);         /* switch knob, slider thumb */

  /* ---- Semantic: border ---- */
  --border-subtle: var(--neutral-150);  /* hairlines, dividers */
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--fom-red);
  --border-on-red: rgba(255,255,255,0.45);

  /* ---- Interactive (primary = red) ---- */
  --action-primary: var(--fom-red);
  --action-primary-hover: var(--red-600);
  --action-primary-active: var(--red-700);
  --action-primary-fg: var(--white);
  --focus-ring: rgba(238,56,49,0.40);

  /* ---- Status (kept on-brand; red doubles as error) ---- */
  --status-success: var(--green-500);
  --status-success-bg: #E7F6EE;
  --status-warning: #E6A100;
  --status-warning-bg: #FCF3DA;
  --status-error: var(--fom-red);
  --status-error-bg: var(--red-50);
  --status-info: var(--neutral-700);
  --status-info-bg: var(--neutral-100);

  /* ---- Soft badge tints (tone bg + readable fg; themed for light/dark) ---- */
  --badge-soft-neutral-bg: var(--neutral-100);
  --badge-soft-neutral-fg: var(--neutral-700);
  --badge-soft-red-bg: var(--red-50);
  --badge-soft-red-fg: var(--red-700);
  --badge-soft-green-bg: #E7F6EE;
  --badge-soft-green-fg: #0C6B39;
  --badge-soft-warning-bg: #FCF3DA;
  --badge-soft-warning-fg: #8A6200;

  /* ---- Misc themed surfaces ---- */
  --tooltip-bg: var(--fom-black);            /* tooltip body + arrow */
  --surface-brand-tint-strong: var(--red-100); /* active nav hover, stronger brand tint */
  --alert-success-border: #BFE6CF;
  --alert-warning-border: #F2E2AD;
  --alert-error-border: var(--red-200);
}

/* ============================================================
   Dark theme — opt-in via <html data-theme="dark"> (or any ancestor).
   Overrides only the semantic layer; brand primitives stay intact.
   Components read these tokens, so the whole kit re-themes from here.
   ============================================================ */
[data-theme="dark"] {
  /* Brand red is muted for dark surfaces — the full-chroma #EE3831 vibrates /
     glares on near-black. We lower chroma & lift lightness so every red element
     (buttons, badges, chips, sliders, progress, checks…) softens at once, since
     they all read var(--fom-red). The vivid red is unchanged in the light theme. */
  --fom-red: #D85C54;          /* muted corporate red for dark */
  --red-700: #B0413B;
  --red-600: #C44C45;
  --red-500: #D85C54;
  --red-400: #E47B74;
  --red-300: #EE9D98;

  /* surfaces */
  --surface-page: #0E141B;
  --surface-subtle: #121922;
  --surface-muted: #1B232E;
  --surface-card: #161E28;
  --surface-inverse: #F6F7F8;
  --surface-brand: #C44C45;    /* deeper still for large red fills */
  --surface-brand-tint: rgba(216, 92, 84, 0.16);
  --surface-input: #121922;
  --surface-disabled: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-hover-strong: rgba(255, 255, 255, 0.10);
  --surface-track: rgba(255, 255, 255, 0.14);
  /* control-knob stays light (white) for contrast on tracks/red */

  /* text */
  --text-strong: #F2F4F6;
  --text-body: #CFD3D8;
  --text-muted: #9CA2A9;
  --text-subtle: #767C83;
  --text-inverse: var(--fom-black);
  --text-brand: var(--red-400);
  --text-on-red: var(--white);

  /* borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --border-brand: var(--fom-red);
  --border-on-red: rgba(255, 255, 255, 0.45);

  /* interactive (red lightens on hover, deepens on press, against dark) */
  --action-primary: var(--fom-red);
  --action-primary-hover: var(--red-400);
  --action-primary-active: var(--red-600);
  --action-primary-fg: var(--white);
  --focus-ring: rgba(216, 92, 84, 0.45);

  /* status */
  --status-success: #2FBE71;
  --status-success-bg: rgba(19, 179, 94, 0.16);
  --status-warning: #E6A100;
  --status-warning-bg: rgba(230, 161, 0, 0.16);
  --status-error: var(--red-400);
  --status-error-bg: rgba(216, 92, 84, 0.16);
  --status-info: var(--neutral-300);
  --status-info-bg: rgba(255, 255, 255, 0.07);

  /* soft badges: bright text on translucent tint so green/amber/red stay
     distinct and readable on dark (the light-theme dark text muddied them) */
  --badge-soft-neutral-bg: rgba(255, 255, 255, 0.09);
  --badge-soft-neutral-fg: #D2D7DC;
  --badge-soft-red-bg: rgba(216, 92, 84, 0.18);
  --badge-soft-red-fg: #F0A8A2;
  --badge-soft-green-bg: rgba(47, 190, 113, 0.18);
  --badge-soft-green-fg: #6FD9A4;
  --badge-soft-warning-bg: rgba(230, 161, 0, 0.20);
  --badge-soft-warning-fg: #EDBA52;

  --tooltip-bg: #2D3641;
  --surface-brand-tint-strong: rgba(216, 92, 84, 0.26);
  --alert-success-border: rgba(47, 190, 113, 0.32);
  --alert-warning-border: rgba(230, 161, 0, 0.34);
  --alert-error-border: rgba(216, 92, 84, 0.34);

  color-scheme: dark;
}

/* ============================================================
   FOM — Spacing, radii, shadows, borders, motion
   The brandbook is flat & geometric (solid color blocks, square
   logo tiles, thin hairline rules, neutral-grey product canvas).
   Shadows are restrained; radii are modest. Hairline = 1px.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---- Radii (modest; the brand reads square/geometric) ---- */
  --radius-none: 0;
  --radius-xs: 3px;     /* logo-tile corner */
  --radius-sm: 6px;
  --radius-md: 10px;    /* default control / card */
  --radius-lg: 16px;    /* large card / sheet */
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-hairline: 1px;   /* dividers / section rules */
  --border-thin: 1.5px;
  --border-thick: 2px;

  /* ---- Icon sizes (Lucide substitution; rounded 2px stroke) ----
     Pair with the Icon wrapper. md (20) is the default UI glyph; sm (16)
     for dense rows/inputs, lg (24) for headers, xl (32) for empty states. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-stroke: 2;         /* matches Lucide's 2px rounded stroke */

  /* ---- Shadows (soft, neutral, low spread) ---- */
  --shadow-xs: 0 1px 2px rgba(16,24,32,0.06);
  --shadow-sm: 0 1px 3px rgba(16,24,32,0.08), 0 1px 2px rgba(16,24,32,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,32,0.08), 0 2px 4px rgba(16,24,32,0.05);
  --shadow-lg: 0 12px 28px rgba(16,24,32,0.12), 0 4px 10px rgba(16,24,32,0.06);
  --shadow-xl: 0 24px 56px rgba(16,24,32,0.16);
  --shadow-red: 0 8px 22px rgba(238,56,49,0.30);   /* lift on primary CTAs */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1320px;
  --gutter: var(--space-6);

  /* ---- Motion (clean fades / short eases; no bounce) ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* Dark theme: deepen shadows so elevation still reads on dark surfaces.
   Lives here (after :root) so it overrides the light --shadow-* at equal
   specificity by source order. */
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.62);
}

/* ============================================================
   FOM — Typography
   Axiforma. Display/accent uses heavy weights at large sizes only (brandbook §6.1). Body uses
   Regular/SemiBold (§6.2). Geometric-rounded, generous tracking
   tightening on large display.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; /* accent — big headings only */
  --font-text: 'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;    /* body / UI */
  --font-system: Arial, Helvetica, system-ui, sans-serif;              /* PPT/email fallback (§6.3) */

  /* ---- OpenType: Axiforma's Russian Cyrillic ("1st stylistic set", brandbook §6.2).
     Default Axiforma ships Bulgarian Cyrillic forms (т→m-like, д→g-like, л→n-like);
     ss01 switches them to correct Russian shapes. Applied globally below. ---- */
  --font-feature-ru: "ss01";

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (rem · 1rem = 16px) ---- */
  --fs-display-2xl: 5rem;     /* 80 — hero section titles on red */
  --fs-display-xl: 3.75rem;   /* 60 */
  --fs-display-lg: 3rem;      /* 48 — page headings */
  --fs-display-md: 2.25rem;   /* 36 */
  --fs-h1: 1.875rem;          /* 30 */
  --fs-h2: 1.5rem;            /* 24 */
  --fs-h3: 1.25rem;           /* 20 */
  --fs-h4: 1.125rem;          /* 18 */
  --fs-body-lg: 1.125rem;     /* 18 */
  --fs-body: 1rem;            /* 16 — default */
  --fs-body-sm: 0.875rem;     /* 14 */
  --fs-caption: 0.8125rem;    /* 13 — section numbers, meta */
  --fs-micro: 0.6875rem;      /* 11 — labels, eyebrows */

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-normal: 0em; /* @kind font */
  --ls-eyebrow: 0.12em; /* @kind font */

  /* ---- Composite role tokens ---- */
  --text-display: var(--fw-extrabold) var(--fs-display-lg)/var(--lh-tight) var(--font-display);
  --text-title: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --text-heading: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-text);
  --text-base: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-text);
  --text-label: var(--fw-semibold) var(--fs-body-sm)/1.3 var(--font-text);
}



  .fom-btn{--_bg:var(--fom-red);--_fg:#fff;--_bd:transparent;
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    font-family:var(--font-text);font-weight:var(--fw-semibold);
    border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg);
    border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;
    text-decoration:none;transition:background var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
      box-shadow var(--dur-fast) var(--ease-standard);-webkit-tap-highlight-color:transparent}
  .fom-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
  .fom-btn--md{height:44px;padding:0 20px;font-size:var(--fs-body)}
  .fom-btn--sm{height:36px;padding:0 14px;font-size:var(--fs-body-sm);border-radius:var(--radius-sm)}
  .fom-btn--lg{height:54px;padding:0 28px;font-size:var(--fs-body-lg)}
  .fom-btn--block{width:100%}
  .fom-btn--primary{--_bg:var(--action-primary);--_fg:var(--action-primary-fg)}
  .fom-btn--primary:hover{--_bg:var(--action-primary-hover)}
  .fom-btn--primary:active{--_bg:var(--action-primary-active)}
  .fom-btn--secondary{--_bg:var(--surface-input);--_fg:var(--text-strong);--_bd:var(--border-default)}
  .fom-btn--secondary:hover{--_bg:var(--surface-hover);--_bd:var(--border-strong)}
  .fom-btn--secondary:active{--_bg:var(--surface-hover-strong)}
  .fom-btn--ghost{--_bg:transparent;--_fg:var(--text-strong)}
  .fom-btn--ghost:hover{--_bg:var(--surface-hover)}
  .fom-btn--ghost:active{--_bg:var(--surface-hover-strong)}
  .fom-btn--inverse{--_bg:#fff;--_fg:var(--fom-red)}
  .fom-btn--inverse:hover{--_bg:rgba(255,255,255,.88)}
  .fom-btn[disabled],.fom-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
  .fom-btn svg{width:1.15em;height:1.15em;flex:none}
  .fom-btn__spin{width:1.05em;height:1.05em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
    flex:none;animation:fom-btn-spin .6s linear infinite}
  @keyframes fom-btn-spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.fom-btn__spin{animation-duration:1.4s}}
  
img.fom-logo{display:block;height:auto}