/*
	Flatma Design System — токены: копия проекта claude.ai/design «Flatma Design System»
	(https://claude.ai/design/p/68af53b9-9fa8-4d83-babe-da6b94c05143): tokens/fonts.css, colors.css,
	typography.css, spacing.css, motion.css, base.css — один в один. Правила — его readme.md и
	CLAUDE.md. Здесь не правится: поменялась система — скопировать её токены заново. Своё — только @import
	шрифтов: со своего сервера (css/fonts/geist.css, scripts/fonts-local.mjs), не с Google Fonts.

	Им пользуются страницы вне студии (account/, p/, community/, terms/, privacy/, moderation/) через
	css/public.css. Студия (designer/) — со своим оформлением (css/styles.css), его это не касается.
*/

@import url('/css/fonts/geist.css?v=2611031542');

:root{
  /* Brand */
  --flatma-ink:#333333;
  --flatma-blue:#0D99FF;
  --flatma-blue-hover:#0A85E0;
  --flatma-blue-ring:#E3F2FF;
  --flatma-blue-light:#7FC6FF;
  --flatma-white:#FFFFFF;
  /* Greys */
  --grey-700:#555555;
  --grey-600:#6B6B6B;
  --grey-550:#7A7A7A;
  --grey-500:#8A8A8A;
  --grey-450:#9A9A9A;
  --grey-400:#AFAFAF;
  --grey-300:#C4C4C4;
  --grey-250:#DCDCDC;
  --grey-200:#E6E6E6;
  --grey-150:#E8E8E8;
  --grey-100:#EDEDED;
  --grey-75:#F2F2F2;
  --grey-50:#F4F4F4;
  --grey-25:#FAFAFA;
  --grey-on-dark-text:#BDBDBD;
  --grey-on-dark-border:#5A5A5A;
  /* Status */
  --status-success:#1F9D60; --status-success-tint:#EDF8F2; --status-success-text:#167A4A;
  --status-warning:#D98A00; --status-warning-tint:#FDF6EA; --status-warning-text:#9A6200;
  --status-error:#E5484D;   --status-error-tint:#FDEFEF;   --status-error-text:#C0353A; --status-error-border:#F3C5C6;
  --status-info:#0D99FF;    --status-info-tint:#EEF7FF;    --status-info-text:#0A6FC2;
  /* Semantic */
  --accent:var(--flatma-blue);
  --accent-hover:var(--flatma-blue-hover);
  --accent-ring:var(--flatma-blue-ring);
  --text-primary:var(--flatma-ink);
  --text-secondary:var(--grey-600);
  --text-tertiary:var(--grey-550);
  --text-meta:var(--grey-500);
  --text-nav:var(--grey-700);
  --text-disabled:var(--grey-400);
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:var(--grey-on-dark-text);
  --surface-page:#FFFFFF;
  --surface-subtle:var(--grey-25);
  --surface-muted:var(--grey-50);
  --surface-disabled:var(--grey-75);
  --surface-dark:var(--flatma-ink);
  --surface-selected:#F8FBFF;
  --surface-header:rgba(255,255,255,0.92);
  --border-divider:var(--grey-100);
  --border-card:var(--grey-150);
  --border-control:var(--grey-200);
  --border-input:var(--grey-250);
  --border-on-dark:var(--grey-on-dark-border);
  --backdrop:rgba(51,51,51,0.4);
  --placeholder-stripes:repeating-linear-gradient(135deg,#F6F6F6 0 10px,#FAFAFA 10px 20px);

  /* Typography */
  --font-sans:'Geist',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --text-h1:clamp(44px,7vw,92px);   --tracking-h1:-0.045em; --leading-h1:1.02;
  --text-h2-cta:clamp(32px,4vw,48px); --tracking-h2-cta:-0.035em;
  --text-h2:28px; --tracking-h2:-0.025em;
  --text-h3:22px; --tracking-h3:-0.02em;
  --text-h4:17px;
  --text-lead:19px; --leading-lead:1.5;
  --text-body-l:16px; --text-body:15px; --text-ui:14px; --text-meta:13px; --text-small:12px; --text-micro:11px;
  --leading-body:1.5; --leading-longform:1.7;
  --tracking-eyebrow:0.08em;

  /* Spacing, radii, elevation */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px;
  --container:1280px; --container-pad:32px; --container-pad-mobile:20px;
  --header-h:64px; --longform-max:680px; --dashboard-max:880px; --sidebar-w:240px; --auth-w:400px;
  --radius-tag:5px; --radius-tooltip:6px; --radius-btn-s:7px; --radius-btn:8px; --radius-btn-l:9px;
  --radius-input:10px; --radius-card:12px; --radius-modal:16px; --radius-pill:999px;
  --border-w:1px;
  --shadow-dropdown:0 8px 24px rgba(0,0,0,0.06);
  --shadow-modal:0 24px 64px rgba(0,0,0,0.10);
  --focus-ring:2px solid var(--flatma-blue);

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:150ms;
  --dur-base:300ms;
  --dur-slow:500ms;
}

@keyframes flatma-spin{to{transform:rotate(360deg)}}
@keyframes flatma-word-in{from{opacity:0;transform:translateY(0.35em)}to{opacity:1;transform:none}}
@keyframes flatma-pulse{0%,100%{opacity:1}50%{opacity:.55}}

*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}