/* Nutrika design tokens — точно по docs/brand-styles.md */
:root {
  /* Primary — Peach */
  --primary: #EA580C;
  --primary-hover: #C2410C;
  --primary-50: #FFF7ED;
  --primary-100: #FFEDD5;
  --primary-200: #FED7AA;
  --primary-300: #FDBA74;
  --primary-400: #FB923C;
  --primary-500: #F97316;
  --primary-600: #EA580C;
  --primary-700: #C2410C;
  --primary-800: #9A3412;
  --primary-900: #7C2D12;

  /* Secondary — Green */
  --secondary: #15803D;
  --secondary-hover: #166534;
  --secondary-50: #F0FDF4;
  --secondary-100: #DCFCE7;
  --secondary-200: #BBF7D0;
  --secondary-300: #86EFAC;
  --secondary-400: #4ADE80;
  --secondary-500: #22C55E;
  --secondary-600: #16A34A;
  --secondary-700: #15803D;
  --secondary-800: #166534;
  --secondary-900: #14532D;

  /* Semantic */
  --success: #15803D;
  --success-light: #DCFCE7;
  --warning: #A16207;
  --warning-light: #FEF9C3;
  --error: #DC2626;
  --error-light: #FEE2E2;

  /* Neutrals — Stone */
  --bg: #FAFAF9;
  --bg-card: #FFFFFF;
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;

  --text: #1C1917;
  --text-secondary: #78716C;
  --text-muted: #A8A29E;
  --border: #E7E5E4;
  --border-hover: #D6D3D1;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Fonts */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ─── Breakpoints (single source of truth) ──────────────────── */
  /* Reference values — read in JS via useBp(); for CSS use @container/@media. */
  --bp-xs:   360px;  /* small phone */
  --bp-sm:   640px;  /* phone landscape / phablet */
  --bp-md:   768px;  /* tablet portrait */
  --bp-lg:  1024px;  /* tablet landscape / small laptop */
  --bp-xl:  1280px;  /* desktop */
  --bp-2xl: 1536px;  /* wide desktop */

  /* Per-breakpoint padding & gap — pages use these via container queries */
  --page-pad-mobile:  16px;
  --page-pad-tablet:  24px;
  --page-pad-desktop: 32px;
  --section-gap-mobile:  18px;
  --section-gap-tablet:  22px;
  --section-gap-desktop: 28px;

  /* Touch targets — minimum 44px on mobile (Apple HIG), 32px desktop */
  --hit-mobile:  44px;
  --hit-desktop: 32px;
}

.nx { font-family: var(--font-body); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
.nx h1, .nx h2, .nx h3, .nx h4 { font-family: var(--font-heading); margin: 0; color: var(--text); }
.nx button { font-family: var(--font-body); }

/* Density modifier (set on screen root). Defaults to "cozy". */
.nx { --pad: 24px; --gap: 16px; --card-pad: 24px; }
.nx[data-density="compact"] { --pad: 16px; --gap: 12px; --card-pad: 18px; }
.nx[data-density="comfortable"] { --pad: 32px; --gap: 24px; --card-pad: 32px; }

/* Common utilities (kept small; per-component CSS-in-JS for everything else) */
.nx-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
}
.nx-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.nx-scroll::-webkit-scrollbar { width: 0; height: 0; }
.nx-scroll { scrollbar-width: none; }

/* Pulse animation for AI assistant blocks */
@keyframes nx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.92); }
}
.nx-ai-dot { animation: nx-pulse 1.8s ease-in-out infinite; }

/* ─── Auth hero animations ──────────────────────────────────── */
@keyframes nx-pulse-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes nx-particle-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--nx-p-op, 0.5); }
  90%  { opacity: var(--nx-p-op, 0.5); }
  100% { transform: translate3d(var(--nx-p-x, 20px), var(--nx-p-y, -40px), 0); opacity: 0; }
}
@keyframes nx-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nx-draw-logo {
  to { stroke-dashoffset: 0; }
}
@keyframes nx-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes nx-ping {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

.nx-fade-up { animation: nx-fade-up .6s cubic-bezier(.2,.7,.3,1) both; }
.nx-fade-in { animation: nx-fade-in .6s both; }

/* Form field focus ring (anti-slop: subtle, no rainbow) */
.nx-field {
  border: 1px solid var(--stone-200);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.nx-field:focus-within {
  border-color: var(--secondary-700);
  box-shadow: 0 0 0 3px rgba(21,128,61,0.1);
}
.nx-field.is-error {
  border-color: var(--error);
}
.nx-field.is-error:focus-within {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}

@media (prefers-reduced-motion: reduce) {
  .nx-fade-up, .nx-fade-in { animation: none; }
  [class*="pulse-drift"], [class*="particle-float"] { animation: none !important; }
}

/* ─── Responsive utilities ─────────────────────────────────────── */

/* Mark a wrapper as a responsive container — children can use @container queries
   to size to the wrapper's width rather than the viewport. Essential for the
   design canvas where mockups are at fixed sizes but content should reflow as if
   they were the only thing on screen. */
.nx-cq { container-type: inline-size; container-name: nx; }

/* Page padding tokens via @container — same component, different paddings */
.nx-page { padding: var(--page-pad-mobile); }
@container nx (min-width: 768px)  { .nx-page { padding: var(--page-pad-tablet); } }
@container nx (min-width: 1024px) { .nx-page { padding: var(--page-pad-desktop); } }

/* Section gap */
.nx-section-stack { display: flex; flex-direction: column; gap: var(--section-gap-mobile); }
@container nx (min-width: 768px)  { .nx-section-stack { gap: var(--section-gap-tablet); } }
@container nx (min-width: 1024px) { .nx-section-stack { gap: var(--section-gap-desktop); } }

/* Show/hide helpers driven by container width (not viewport) */
.nx-hide-mobile  { display: none; }
.nx-hide-tablet  { display: initial; }
.nx-hide-desktop { display: initial; }
@container nx (min-width: 640px)  { .nx-hide-mobile  { display: initial; } }
@container nx (min-width: 640px) and (max-width: 1023.98px) { .nx-hide-tablet { display: none; } }
@container nx (min-width: 1024px) { .nx-hide-desktop { display: none; } }

.nx-only-mobile  { display: initial; }
.nx-only-tablet  { display: none; }
.nx-only-desktop { display: none; }
@container nx (min-width: 640px)  { .nx-only-mobile  { display: none; } }
@container nx (min-width: 640px) and (max-width: 1023.98px) { .nx-only-tablet { display: initial; } }
@container nx (min-width: 1024px) { .nx-only-desktop { display: initial; } }

/* Touch-target floor for mobile (mins for clickable elements inside container) */
@container nx (max-width: 639.98px) {
  .nx-tap { min-height: var(--hit-mobile); min-width: var(--hit-mobile); }
}

/* Responsive grid — auto-fits N columns, falls back to 1 on narrow */
.nx-grid-auto { display: grid; gap: 16px; grid-template-columns: 1fr; }
@container nx (min-width: 640px)  { .nx-grid-auto { grid-template-columns: repeat(2, 1fr); } }
@container nx (min-width: 1024px) { .nx-grid-auto { grid-template-columns: repeat(3, 1fr); } }
@container nx (min-width: 1280px) { .nx-grid-auto { grid-template-columns: repeat(4, 1fr); } }

/* Two-pane layout — sidebar+main becomes stacked on mobile */
.nx-2pane { display: grid; gap: 16px; grid-template-columns: 1fr; }
@container nx (min-width: 1024px) { .nx-2pane { grid-template-columns: 280px 1fr; gap: 24px; } }

/* Hide scrollbar but keep scroll (used by horizontal tab strips, chip rows) */
.nx-hscroll { overflow-x: auto; scrollbar-width: none; }
.nx-hscroll::-webkit-scrollbar { display: none; }