/* Smart Feed v1 — tokens (editorial wire-terminal) */

/* Layer order declaration. Last declared = highest priority.
   Files loaded AFTER this one only need to wrap their rules in `@layer <name> { ... }`
   and they automatically slot into this order — no more cascade surprises. */
@layer reset, tokens, base, components, pages, utilities;

:root {
  /* Surfaces — warmer near-white, tinted neutrals */
  --sf-bg: #fbfaf7;
  --sf-bg-accent: #f1efe9;
  --sf-surface: #ffffff;
  --sf-surface-muted: #f6f5f1;
  --sf-border: #e5e3dc;
  --sf-border-strong: #d3d0c5;

  --sf-fg: #1a1a1a;
  --sf-fg-secondary: #3d3d3d;
  --sf-fg-muted: #767466;
  --sf-fg-inverse: #fbfaf7;

  /* Ink — single, desaturated. Built for reading, not for highlighting */
  --sf-brand: #1f3a8a;
  --sf-brand-hover: #172a66;
  --sf-accent: #1f3a8a;
  --sf-accent-hover: #172a66;
  --sf-accent-muted: #eef0f7;

  --sf-success: #166534;
  --sf-success-bg: #f0fdf4;
  --sf-success-border: #bbf7d0;
  --sf-warning: #854d0e;
  --sf-warning-bg: #fefce8;
  --sf-warning-border: #fde68a;
  --sf-error: #991b1b;
  --sf-error-bg: #fef2f2;
  --sf-error-border: #fecaca; 
  --sf-info: #1e3a5f;
  --sf-info-bg: #f8fafc;
  --sf-info-border: #e5e7eb;

  --sf-up: #1d5a3a;
  --sf-down: #8a2735;

  --sf-ring: #1f3a8a;
  --sf-shadow: 0 1px 0 rgba(26, 26, 26, 0.04);

  /* Radius — small, deliberate; not pill-shaped */
  --sf-radius: 3px;
  --sf-radius-sm: 2px;
  --sf-radius-lg: 6px;

  /* Spacing scale — slightly more generous for breathing room */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-5: 1.5rem;
  --sf-space-6: 2rem;
  --sf-space-8: 2.5rem;

  /* Type — sans for chrome, serif with character for editorial content */
  --sf-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sf-font-display: "Fraunces", "Iowan Old Style", "Charter", "Georgia", ui-serif, serif;
  --sf-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;

  --sf-text-xs: 0.75rem;
  --sf-text-sm: 0.8125rem;
  --sf-text-base: 0.9375rem;
  --sf-text-lg: 1.0625rem;
  --sf-text-xl: 1.25rem;
  --sf-text-2xl: 1.625rem;
  --sf-leading: 1.6;
  --sf-leading-tight: 1.25;
  --sf-leading-display: 1.1;

  --sf-touch: 40px;
  --sf-login-max: 20rem;
  --sf-sidebar-w: 14rem;
  --sf-content-narrow: 48rem;
  --sf-content-wide: 80rem;
  --sf-content-pad: 1.5rem;

  /* Vùng tiêu đề + bộ lọc vs nội dung chính — clearly distinct */
  --sf-zone-controls-bg: #ecebe4;
  --sf-zone-content-bg: #fbfaf7;

  /* Motion — soft, weighty, deliberate */
  --sf-motion: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --sf-motion-quick: 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --sf-motion-slow: 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}