/* Кредит Профи — токены дизайн-системы (claude.ai/design, проект 4273e169).
   Скопированы из tokens/: fonts, colors, typography, spacing, radii, elevation, motion. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root{
  /* ---- brand base ---- */
  --blue-700:#2536C7;
  --blue-600:#2E3FE5;
  --blue-500:#4A58EA;
  --blue-300:#9AA3F2;
  --blue-100:#DCE3FF;
  --blue-50:#EEF3FF;

  --navy-900:#102253;
  --navy-800:#16307A;
  --navy-700:#1D3A8F;
  --navy-600:#2A4AA8;

  --green-600:#00A878;
  --green-500:#00C896;
  --green-300:#6FE3C3;
  --green-100:#C9F6E8;
  --green-50:#E8FBF5;

  --sky-600:#1E90D0;
  --sky-500:#2AABEE;
  --sky-100:#D6EEFB;

  --amber-600:#E09000;
  --amber-500:#FFB020;
  --amber-100:#FFEDCC;
  --amber-50:#FFF7E8;

  --red-600:#D93A3F;
  --red-500:#E5484D;
  --red-100:#FBDBDC;
  --red-50:#FDEEEF;

  /* ---- ink (blue-tinted neutrals) ---- */
  --ink-900:#16204A;
  --ink-800:#26315C;
  --ink-700:#3C4666;
  --ink-500:#6A7396;
  --ink-400:#8A92B2;
  --ink-300:#B4BBD4;
  --ink-200:#C9CFE4;
  --ink-100:#E4E9F5;
  --ink-50:#F1F4FB;

  --white:#FFFFFF;
  --paper:#F6F8FC;

  /* ---- semantic: light theme ---- */
  --text-strong:var(--navy-700);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-link:var(--blue-600);
  --text-link-hover:var(--navy-700);
  --text-figure:var(--navy-700);
  --text-figure-accent:var(--green-600);

  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--blue-50);
  --surface-raised:var(--white);
  --surface-navy:var(--navy-700);
  --surface-navy-deep:var(--navy-900);
  --surface-accent-soft:var(--green-50);
  --surface-warn-soft:var(--amber-50);
  --surface-danger-soft:var(--red-50);
  --surface-primary-soft:var(--blue-50);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--blue-100);
  --border-focus:var(--blue-600);
  --divider-on-navy:rgba(255,255,255,.18);

  --color-primary:var(--blue-600);
  --color-primary-hover:var(--blue-500);
  --color-primary-active:var(--blue-700);
  --color-primary-contrast:var(--white);
  --color-accent:var(--green-500);
  --color-accent-hover:var(--green-600);
  --color-accent-contrast:var(--white);

  --color-success:var(--green-600);
  --color-success-soft:var(--green-50);
  --color-warning:var(--amber-600);
  --color-warning-soft:var(--amber-50);
  --color-info:var(--sky-600);
  --color-info-soft:var(--sky-100);
  --color-danger:var(--red-500);
  --color-danger-soft:var(--red-50);

  --gradient-brand:linear-gradient(135deg,#2AABEE 0%,#00C896 100%);
  --gradient-brand-soft:linear-gradient(135deg,#D6EEFB 0%,#E8FBF5 100%);
  --gradient-navy:linear-gradient(157deg,#1D3A8F 0%,#102253 100%);
  --gradient-arc:linear-gradient(180deg,#2E3FE5 0%,#00C896 100%);

  --focus-ring:0 0 0 3px rgba(46,63,229,.28);
  --focus-ring-on-navy:0 0 0 3px rgba(0,200,150,.42);

  /* ---- typography ---- */
  --font-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-text:"Inter","Helvetica Neue",Arial,sans-serif;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  --fs-display-1:64px;
  --fs-display-2:52px;
  --fs-display-3:42px;
  --fs-h1:34px;
  --fs-h2:27px;
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-body-lg:19px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-legal:11px;
  --fs-overline:12px;

  --fs-figure-hero:88px;
  --fs-figure-xl:56px;
  --fs-figure-lg:40px;
  --fs-figure-md:28px;

  --lh-tight:1.04;
  --lh-display:1.1;
  --lh-heading:1.2;
  --lh-snug:1.35;
  --lh-body:1.55;
  --lh-loose:1.7;

  --ls-display:-0.025em;
  --ls-heading:-0.015em;
  --ls-overline:0.1em;
  --ls-figure:-0.03em;

  /* ---- spacing ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px; --space-13:128px;

  --gutter-card:24px;
  --gutter-card-lg:32px;
  --gutter-section:80px;
  --gutter-grid:24px;
  --container-max:1200px;
  --container-narrow:760px;

  /* ---- radii ---- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-2xl:40px;
  --radius-pill:999px;
  --rule-width:3px;

  /* ---- elevation ---- */
  --shadow-xs:0 1px 2px rgba(29,58,143,.06);
  --shadow-sm:0 1px 2px rgba(29,58,143,.06),0 2px 6px -2px rgba(29,58,143,.10);
  --shadow-md:0 1px 2px rgba(29,58,143,.05),0 8px 24px -10px rgba(29,58,143,.16);
  --shadow-lg:0 2px 4px rgba(29,58,143,.04),0 20px 44px -16px rgba(29,58,143,.22);
  --shadow-xl:0 4px 8px rgba(16,34,83,.06),0 36px 72px -24px rgba(16,34,83,.28);
  --shadow-accent:0 10px 28px -12px rgba(0,168,120,.55);
  --shadow-primary:0 10px 28px -12px rgba(46,63,229,.5);
  --blur-panel:blur(16px);

  /* ---- motion ---- */
  --dur-fast:160ms;
  --dur-base:220ms;
  --dur-slow:340ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --transition-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  --transition-lift:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}

/* ---- navy theme: data-theme="navy" на корне секции ---- */
[data-theme="navy"]{
  --text-strong:var(--white);
  --text-body:rgba(255,255,255,.86);
  --text-muted:rgba(255,255,255,.66);
  --text-faint:rgba(255,255,255,.48);
  --text-inverse:var(--navy-700);
  --text-link:var(--green-300);
  --text-link-hover:var(--white);
  --text-figure:var(--white);
  --text-figure-accent:var(--green-500);

  --surface-page:var(--navy-700);
  --surface-card:rgba(255,255,255,.07);
  --surface-sunken:rgba(16,34,83,.55);
  --surface-raised:rgba(255,255,255,.11);
  --surface-accent-soft:rgba(0,200,150,.14);
  --surface-warn-soft:rgba(255,176,32,.16);

  --border-subtle:rgba(255,255,255,.14);
  --border-default:rgba(255,255,255,.22);
  --border-strong:rgba(0,200,150,.5);
  --border-focus:var(--green-500);

  --color-primary:var(--green-500);
  --color-primary-hover:var(--green-300);
  --color-primary-active:var(--green-600);
  --color-primary-contrast:var(--navy-900);
  --color-success:var(--green-500);

  --focus-ring:var(--focus-ring-on-navy);
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}