/*
 * SameFrame Design Tokens
 * Source of truth: docs/brandbook.md §2 (Color), §3 (Typography),
 * §5.1 (Radius/Elevation), §7.1 (Spacing), §7.3 (Breakpoints).
 *
 * Do not hard-code hex values, px spacing, or font stacks anywhere else —
 * always reference these custom properties.
 */

:root {
  /* --- Color: Primary / Secondary (brandbook §2.1) --- */
  --sf-primary-900: #0F2A43;
  --sf-primary-700: #1B4B73;
  --sf-primary-500: #2C6BA3;
  --sf-primary-300: #7FA8C9;
  --sf-primary-100: #DCE8F2;
  --sf-secondary-500: #2FA88C;
  --sf-secondary-100: #DDF2EC;

  /* --- Color: Neutrals (brandbook §2.2) --- */
  --sf-neutral-900: #111417;
  --sf-neutral-700: #3A414A;
  --sf-neutral-500: #6B7280;
  --sf-neutral-300: #D1D5DB;
  --sf-neutral-100: #F4F5F7;
  --sf-neutral-0: #FFFFFF;
  --sf-neutral-950: #0A0C0E;

  /* --- Color: Semantic states (brandbook §2.3) --- */
  --sf-success-500: #1E8E5A;
  --sf-success-100: #E1F5EB;
  --sf-error-500: #C4342F;
  --sf-error-100: #FBE7E6;
  --sf-warning-500: #B8860B;
  --sf-warning-100: #FBF1DA;
  --sf-pending-500: #8B5CF6;
  --sf-pending-100: #EFE9FC;

  /* --- Typography: font families (brandbook §3.1) --- */
  --sf-font-latin: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --sf-font-hebrew: Assistant, "Segoe UI", system-ui, sans-serif;
  --sf-font-ui: var(--sf-font-latin), var(--sf-font-hebrew);
  --sf-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- Typography: weights (brandbook §3.2) --- */
  --sf-font-regular: 400;
  --sf-font-medium: 500;
  --sf-font-semibold: 600;
  --sf-font-bold: 700;
  --sf-font-extrabold: 800;

  /* --- Typography: sizing scale (brandbook §3.3) --- */
  --sf-text-xs: 0.75rem;
  --sf-text-xs-lh: 1.4;
  --sf-text-sm: 0.875rem;
  --sf-text-sm-lh: 1.5;
  --sf-text-base: 1rem;
  --sf-text-base-lh: 1.6;
  --sf-text-lg: 1.125rem;
  --sf-text-lg-lh: 1.5;
  --sf-text-xl: 1.25rem;
  --sf-text-xl-lh: 1.4;
  --sf-text-2xl: 1.563rem;
  --sf-text-2xl-lh: 1.3;
  --sf-text-3xl: 1.953rem;
  --sf-text-3xl-lh: 1.25;
  --sf-text-4xl: 2.441rem;
  --sf-text-4xl-lh: 1.15;

  /* --- Radius & elevation (brandbook §5.1) --- */
  --sf-radius-sm: 6px;
  --sf-radius-md: 10px;
  --sf-radius-lg: 16px;
  --sf-shadow-sm: 0 1px 2px rgba(15, 42, 67, 0.06);
  --sf-shadow-md: 0 4px 12px rgba(15, 42, 67, 0.10);

  /* --- Spacing scale, 4px base unit (brandbook §7.1) --- */
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-6: 24px;
  --sf-space-8: 32px;
  --sf-space-12: 48px;
  --sf-space-16: 64px;

  /* --- Breakpoints (brandbook §7.3) — referenced via comments in media
     queries since custom properties can't be used inside @media directly. */
  /* sm: 480px, md: 768px, lg: 1024px, xl: 1280px */

  /* --- Admin grid (brandbook §7.2) --- */
  --sf-content-max-width: 1280px;
  --sf-grid-gutter: var(--sf-space-6);
}